Заставьте текстовое поле заполнить все доступное пространство в контейнере, но для фиксированной кнопки должно быть место - PullRequest
Новая
       8

Заставьте текстовое поле заполнить все доступное пространство в контейнере, но для фиксированной кнопки должно быть место

2 голосов
/ 13 июня 2011

Я делаю страницу aspx, которая предназначена для просмотра внутри iframe.Страница существует в виде простой сетки, а в верхней части страницы находится текстовое поле и кнопка.(функция поиска)

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

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

1 Ответ

4 голосов
/ 13 июня 2011

Я не нашел что-то действительно элегантно, но у меня есть 3 варианта для вас.

Установите ширину текстового поля с помощью JavaScript. 

textBox.width = textBox.Parent.width - button.width

Используйте текстовое поле шириной 100% (или почти) в Абсолют и поместите кнопку поверх него 

<div style="position:relative">
  <input type="button" style="float:right" value="search or what not" />
  <input type="text" style="width:100%; position:absolute; top:0px; z-index:-1 " />
  <br style="clear:both" />
</div>

использовать таблицу 

<table width="100%">
    <tr><td>
        <input type="text" style="width:100%" />
    </td><td width="100">
        <input type="button" value="search or what not" />
    </td></tr>
</table>
...