| |
|
|
| | Передо мной стоит задача сделать строку для типовой формы:
- слева метка фиксированной ширины;
- поле ввода данных, а может и несколько полей;
- дополнительные элементы, которые могут отсутствовать.
<div>
<label style="width: 100px; float: left">Метка</label>
<div class="additional" style="float: right"><button>Кнопочка</button><b>Тест</b></div>
<div class="input" style="margin-left: 110px; width: 100%">
<input style="width: 49%" />
<input style="width: 49%" />
</div>
</div>
|
Этот код работает так, как мне нужно, только в IE, в нормальных браузерах input смещается вниз и растягивается по все ширине.
В общем, прошу вашей помощи! Подскажите, как убедить <div class="input"> занять свободное пространство между меткой <label> и <div class="additional">, чтобы все элементы были в одну строку. | |
| |
|
|
| |
|
|
| |
для: finnish
(11.02.2009 в 19:54)
| | | Конечно можно поломать голову и выяснить в чем же проблема и почему эти поля переносятся в "нормальных браузерах".
Но всетаки стоит напомнить вам, что все "нормальные" такие проблемы решают таблицами. И такие табличные решения ведут себя абсолютно одинакого во всех видах браузоров.
Лично я стараюсь как можно реже применять к блокам это непредсказуемое свойство float. Ибо доказано, что оно некорректно работает во многих браузерах при взаимодействии с другими объектами.
Поэтому рекомендую воспользоваться таблицей в данном случае. А если это неприемлемо в данной ситуации, то ничем помочь немогу... | |
| |
|
|
