Кросс-браузерный CSS для выравнивания по правому краю позиции текстового поля

Question

Я использую язык rightToLeft для своего пользовательского интерфейса, поэтому мне нужно иметь метку текстового поля справа. Я попытался использовать div с float:right для метки и div с float:left для текстового поля. но он все равно не выравнивается в моей форме.

Это пример кода:

<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>

и когда я использовал таблицу и попытался поместить текстовое поле в один столбец, а метку - в другой, они не совпали в одной строке.

Answer 1

jsfiddle делает то, что вы хотите. Ключ в том, чтобы очистить ваши поплавки так, чтобы все строки ввода / метки оказались в своих собственных отдельных строках. Это также хорошая идея, когда вы можете использовать float для указания ширины элементов. Это предотвратит случайное падение поплавка.

Также для удобства использования я добавил элемент <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;
}

Answer 2

Каким образом он не выравнивается должным образом?можете показать нам скриншот и пример кодировок?Хочешь проверить свои поля и отступы для каждого поля, которое не выравнивается должным образом?Сначала сделайте поля и отступы равными 0.

На самом деле другой способ - использовать таблицу, если она применима к вам.Внутри отдельной ячейки просто убедитесь, что отступ / отступ равен 0. Затем используйте свойство выравнивания ячейки, чтобы отрегулировать проблему выравнивания.Из того, что я вижу, использование таблицы для выравнивания формы определенно является кросс-браузерной