Два поля ввода в одной строке, выровняйте один левый и правый правый

Я хочу иметь форму, которая состоит из разных полей ввода. На некоторых строках должно быть два поля ввода. Второй должен быть выровнен правильно.Два поля ввода в одной строке, выровняйте один левый и правый правый

jsFiddle

HTML:

<table> 
    <tr> 
     <td> 
      <input type="text" name="first-name" class="form-first-name" />&nbsp; 
      <input type="text" name="last-name" class="form-last-name" /> 
     </td> 
    </tr> 
    <tr> 
     <td class="empty-row">&nbsp;</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="text" name="address-1" class="form-address-1" /> 
     </td> 
    </tr> 
</table>

CSS:

.form-address-1 { 
    width: 100%; 
} 

.form-first-name, .form-last-name { 
    width: 46%; 
} 

.form-last-name { 
    float: right; 
}

Моя проблема заключается в том, что входные поля имеют разные размеры и поэтому размер строки как-то меняется. Я попытался установить ширину tr без успеха. Как правильно выровнять второе поле ввода?

источник

2013-09-26 testing

Сво выпуск бокс-макета.

проверьте с инспектором, и вы увидите, что ваш адресный вход переполнен его строкой. (то потому что 100% + маржа по умолчанию/дополнение = более 100%)

Working Fiddle

Добавьте это в CSS

* 
{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

источник

2013-09-26 20:32:39 avrahamcool

Спасибо. Поэтому удаление поля/заполнения или уменьшение размера должно работать, чем! Я проверил поддержку браузера для 'box-sizing', и похоже, что IE7 не может справиться с этим. Поэтому я установил ширину от '.form-address-1' до 99%, и она работала в моем первом тесте. – testing

@ на самом деле. Не забудьте отметить ответ, как принято. – avrahamcool

Установите ширину таблицы, а не tr.

источник

2013-09-26 20:28:16 andi

В моей отзывчивой компоновке я не хочу устанавливать ширину ... Но я попробовал это, и '.form-last-name' не идеально выровнен с правой стороны. Он должен быть на том же уровне, что и '.form-address-1' и выравниваться вправо. – testing

делают использование min-width:, а также сделать .form-first-name{float:left;}

источник

2013-09-26 20:29:51 vishalkin

Хммм Я делаю что-то не так? Я устанавливаю 'min-width' на таблице, и я устанавливаю' float: left', как вы сказали, но '.form-last-name' не полностью выровнен справа ... – testing

Вы можете сделать это нравится:

<td> 
     <span style="float:left"> 
      <input type="text" name="first-name" class="form-first-name" /></span> 
     <span style="float:right"> 
      <input type="text" name="last-name" class="form-last-name" /></span> 
</td>

http://jsfiddle.net/KxUgt/8/

источник

2013-09-26 20:34:52

'.form-last-name' не полностью выровнен с правой стороны по сравнению с' .form-address-1' – testing

Два поля ввода в одной строке, выровняйте один левый и правый правый

ответ

Смежные вопросы