Жидкая ширина текстового поля

У меня есть эта довольно простая форма:

<form action="...">
    <div>
        <input type="text" class="input-text" value="" name="text" />
        <input type="submit" class="submit" value="Submit" />
    </div>
</form>

Форма находится внутри блока div фиксированной ширины (указанного в ems).

Я хочу, чтобы текстовое поле и кнопка были одной строкой, но ширина текстового поля несовместима в разных браузерах, даже когда я указываю атрибут size. Не желая указывать точную ширину (особенно для кнопки), мне было интересно, можно ли придать текстовому полю жидкую ширину? Я хочу, чтобы текстовое поле растягивалось, чтобы и оно, и кнопка могли поместиться на одной строке.


textfield css width liquid-layout
person AJM    schedule 05.03.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Да, length для количества символов, а не для ширины.

Вы хотите, чтобы текстовое поле занимало все доступное пространство за исключением того, что занимает кнопка? Это выполнимо с таблицей (но меня постоянно освистывают в Stack Overflow за предложение таблиц). Скажем, ради аргумента вы используете DIV с display:table, но просто для простоты я проиллюстрирую реальную разметку таблицы.

<table cellpadding=0 cellspacing=0 width=100%>
  <tr>
      <td><input type="text" style="width:100%"></td>
      <td style="width:0"><input type="submit"></td>
  </tr>
</table>

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

person jpsimons    schedule 05.03.2011
comment
Однако я должен добавить, что обычно лучше не управлять HTML/CSS на микроуровне. Если бы это был я, достаточно было бы просто задать текстовому полю фиксированную ширину в ems. Если ваш дизайнер настаивает на том, чтобы текстовое поле и кнопка располагались на одном уровне с правым краем, возможно, вам нужен новый дизайнер? - person jpsimons; 05.03.2011
comment
Это то, что я в конечном итоге сделал, хотя я использовал элементы div, стилизованные под display: table и т. д. Однако для входных данных можно ли стилизовать их с помощью display: table-cell напрямую вместо того, чтобы оборачивать их в td? У меня никогда не работал этот метод, но он меня привлекает, так как это означало бы меньше div. - person AJM; 05.03.2011
comment
Это могут быть не табличные данные, но это практическое решение повторяющейся проблемы, которую текущие версии HTML и CSS не могут решить должным образом. - person AlexG; 06.12.2012

arrow_upward
1
arrow_downward

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

  • FF: 47 пикселей + граница 3 пикселя
  • Chrome: 45 пикселей + граница 2 пикселя
  • IE8: 63px + отступ 8px + граница 3px
  • IE7: 61px + 2px граница

Нет элегантного способа сделать это, но у вас есть следующие варианты:

  • Используйте таблицы (Google использует таблицы для своего окна поиска).
  • Стиль для поля ввода и кнопки отправки (не рекомендуется).
  • Используйте скрипт (не рекомендуется).
person melhosseiny    schedule 05.03.2011