跨瀏覽器CSS用於右對齊文本字段的標籤位置

我正在使用rightToLeft語言用於我的用戶界面，因此我需要在右側使用textfield標籤。我嘗試使用div爲float:right作爲標籤，使用div作爲float:left作爲textfield。但它仍然沒有正確對齊我的形式。跨瀏覽器CSS用於右對齊文本字段的標籤位置

這是代碼示例：

<s:form action="processRegister" cssClass="form"> 
    <div style="float:right;text-align:right"> 
     <s:text name="label12.msg"/> 
    </div> 
    <div style="float:left"> 
     <s:textfield name="username" cssClass="textfield" /> 
    </div> 

    <div style="float:right;text-align:right"> 
     <s:text name="label13.msg"/> 
    </div> 
    <div style="float:left"> 
     <s:password id="password1" name="password" cssClass="textfield"/> 
    </div> 
</s:form>

，當我使用的表，並試圖把文本框上的一列標籤上的其他列，他們並沒有在一行對齊。

來源

2010-08-08 Zahra Iman

你有一個屏幕截圖？有幾個可能的原因 - – 2010-08-08 09:09:23

它以什麼方式不正確對齊？可以向我們展示一些截圖和編碼的例子嗎？ ü想檢查你的magin和每個領域的填充沒有正確對齊？首先使邊距和填充爲0。

實際上另一種方法是使用一張表，如果它適用於你。在單個單元格中，只需確保填充/邊距爲0. 然後使用單元格的對齊屬性來調整對齊問題。從我看到的，使用表格進行對齊絕對是跨瀏覽器

來源

2010-08-08 09:10:25

謝謝，但是當我使用表並嘗試將文本字段放在左欄中，並且它是右欄中的標籤時，textfield會得到一整行，並且不會與其標籤對齊成一行。我爲這個問題使用了簡單的主題，但它不會讓驗證工作，所以我不得不刪除它。 – 2010-08-08 09:42:51

實際上你的文本字段是一個文本框或一個textarea，從你的代碼中，它看起來像一個文本框相當於。我不完全理解你的「textfield得到一整行，並不與其標籤對齊」。也許你可以試試這個嗎？控制單元格和表格的寬度。如果這仍然沒有幫助，則很抱歉無法幫助 <表寬度= 「300」> < TD寬度= 「150」 ALIGN = 「左」> – 2010-08-08 13:11:41

這jsfiddle做你想做的。關鍵在於清除你的浮點數，以便所有的輸入/標籤行都以各自不同的線條結束。儘可能使用浮點數指定元素的寬度也是一個好主意。這將防止意外浮動下降。

此外，爲了便於使用，我添加了<label>元素，以便屏幕閱讀器知道您的標籤適用於哪個<input>。

HTML

<form> 
    <div> 
     <label for="username">Username</label>  
     <input type="text" id="username" name="username" size="20"/> 
    </div> 
    <div> 
     <label for="password">Password</label> 
     <input type="password" id="password" name="password" size="20"/> 
    </div> 
</form>

CSS

div { 
    clear: both; 
    width: 300px; 
} 

div label { 
    float: right; 
    text-align: right; 
} 

div input { 
    float: left; 
}

來源

2010-08-14 12:35:10 Pat

感謝。我需要檢查一下。但實際上問題是，我必須使用struts2的用戶標籤獲取來自用戶的輸入，並且它呈現和2，一個用於標籤，另一個用於輸入。我想我需要爲該標籤定義一個新模板。無論如何感謝您的回覆。 – 2010-08-15 05:47:29

你可以切換到這些文本字段的簡單主題嗎（''）？這樣它就不會渲染tr和td標籤。不幸的是，如果你不得不繼續使用表格行/表格單元格，那麼交換標籤和輸入字段的位置就沒有多少工作可做。 – Pat 2010-08-15 13:32:57

跨瀏覽器CSS用於右對齊文本字段的標籤位置

回答

相關問題