Ящики ввода не выстраиваются правильно

Извините за довольно расплывчатое название, я не мог придумать лучшего описания моей проблемы.Ящики ввода не выстраиваются правильно

У меня есть простая форма HTML:

<html> 
<FIELDSET> 
    <DIV> 
     <SPAN class="label">Label 1</SPAN> 
     <DIV class="div"> 
      <input id="input1" value="The first input box"> 
     </DIV> 
    </DIV> 
    </FIELDSET>  

    <FIELDSET> 
     <DIV> 
      <SPAN class="label">Label 2</SPAN> 
      <INPUT id ="input2" class="textbox" value="the second input box"> 
     </DIV> 
    </FIELDSET> 
</html>

с некоторой простой стилизацией

.label{float:left} 
.textbox{float:right;width:75%} 
.div{float:right;width:75%}

С этим, я хотел бы ожидать, оба поля ввода быть выравниванием по левому краю, а input2 находится имеют поплавок: право с шириной 75%, а родительский div ввода 1 также плавает справа с той же шириной. Однако, вы не выстроились правильно, и я не знаю, почему. Протестировано в IE8 и firefox 9 - jsfiddle link: http://jsfiddle.net/nrF2W/

Примечание: Я попытался сделать простейший возможный пример, который все еще показал проблему, с которой я столкнулся. В div, содержащем первое поле ввода, должно быть больше, чем просто одно поле ввода.

Edit: Скажи, например, начальный вход DIV должен быть:

<DIV class="div"> 
    <input value="1"> 
    <input type="checkbox"> 
</DIV>

Какой поле ввода следует флажком, на одной и той же линии. Установка ширины окна ввода на 75% не подходит для этой ситуации. Чтобы уточнить, не длина ящиков ввода не выстраивается, что у меня проблема, это их отсутствие выравнивания слева.

источник

2012-01-17 John

Должны ли они быть 2 полностью несвязанными входами? Если входы связаны каким-либо образом, они, вероятно, должны находиться в одном поле. Вы определенно хотите, в отдельных полях? – Deadlykipper

Да, входы в каждом наборе полей должны быть полностью несвязаны. – John

Я просто просмотрел ваш пример скрипта, обнаружил, что 'width: 75%' for 'div' не совпадает с шириной' div' и 'fieldset', изменяя ширину вашего класса' .div' до '76%' вы можете достичь этого. – Murtaza

http://jsfiddle.net/nrF2W/2/

Вы имели 75% для одного только DIV, а не для ввода

источник

2012-01-17 12:12:35 giker

Это отлично работает для одного поля ввода в div, но не добавляется ничего. Я сделал редактирование для OP. – John

изменение .div{float:right;width:75%} в .div input{float:right;width:75%}

источник

2012-01-17 12:11:46 Alex

Они не выстраиваются в линию, так как вы устанавливаете свойства на div элемента на с одной стороны, и на элементе input - с другой. Но даже если вы исправите это, дизайн не является надежным - проверьте, что произойдет, если ярлыки длинны и/или окно браузера очень узкое или очень широкое.

Более надежный подход заключается в использовании таблицы с метками в одном столбце, поля ввода в другом. Тогда первый столбец будет автоматически шириной по мере необходимости, и вам не нужно делать произвольные догадки, например, 75%.

источник

2012-01-17 12:19:52

Попробуйте это: http://jsfiddle.net/YE288/11/

это не ДИВ это больше - я предпочитаю использовать списки для элементов формы. Но он будет выстраиваться в линию в зависимости от того, насколько широко вы установили свои ярлыки.

EDIT: Используя мой пример, вы совместите входы размера этикетки. Это создаст единую форму для любого ввода - я не уверен, почему вы настаиваете на использовании дополнительного div.

источник

2012-01-17 12:37:46 Deadlykipper

Ящики ввода не выстраиваются правильно

ответ

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