Готовлю "инструмент" для последующего удобного составления форм. Каждый элемент формы описан div'ом и располагаются они друг под другом. У каждого элемента есть метка, input (select, textarea) и дополнительные данные (текст, кнопки, может ещё что-то). Ниже привел HTML-код одного элемента.
Полная Версия: Три колонки...
| HTML |
| <div class="item"> <label class="caption" for="input">Метка</label> <input class="input" id="input" /> <span class="additional"><button>Кнопочка</button></span> </div> |
Задача: расположить caption, input и additional в одну строку.
Условия:
- caption фиксированной ширины
- additional может отсутствовать
- additional содержит переменный контент, ширина должна быть по контенту
- input должен заполнять оставшееся пространство между caption и additional.
Спустя 2 часа, 8 минут, 49 секунд (6.02.2009 - 21:13) REANIMATOR написал(а):
Да.. я помню тоже столкнулся с такой проблемой однажды... до сих пор не помню её решение, но благо что сохранил код 
вобщем вот решение.
вобщем вот решение.
| HTML |
| <div class="item" style="width:1000px; height:100%; display: table-cell"> <div style=" height:27px; width:50px; float:left;"><label class="caption" style="float:left;" for="input">Метка</label></div> <div style="height:27px; float:right; "><span style="float:left" class="additional"><button>Кнопочка</button>fhcccccccc</span></div> <div style=" height:27px;"><input class="input" style="width: 100%" id="input" /></div> </div> |
Спустя 10 часов, 11 минут, 34 секунды (7.02.2009 - 07:24) Finnish написал(а):
Огромное спасибо! Именно то, что я искал! 
Спустя 8 минут, 54 секунды (7.02.2009 - 07:33) Finnish написал(а):
Подкрутив немного код, привел его к тому виду, что у меня:
| HTML |
| <div> <label style="float:left; width: 50px" for="input">Метка</label> <span style="float:right"><button>Кнопочка</button></span> <input style="width: 100%" id="input" /> </div> |
Ещё раз спасибо.
Спустя 27 минут, 32 секунды (7.02.2009 - 08:01) REANIMATOR написал(а):
всегда рад помоч 
Спустя 2 дня, 43 минуты, 43 секунды (9.02.2009 - 08:45) Гость_Дмитрий написал(а):
А у меня не работает. Этот код принимает так, как нам хочется, только IE, нормальные браузеры вытягивают input по всей ширине ниже метки. Есть еще варианты?
Здесь расположена полная версия этой страницы.