Ширина жидкого текстового поля - PullRequest
Новая
       15

Ширина жидкого текстового поля

0 голосов
/ 05 марта 2011

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 05 марта 2011

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

Вы хотите, чтобы текстовое поле заполнило все доступное пространство за исключением того, что занимает кнопка?Это выполнимо с таблицей (но я постоянно получаю удовольствие от переполнения стека за предложение таблиц).Допустим, ради аргумента вы используете 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 в ячейке кнопки может показаться странной, но таблицаклетки принимают свою ширину только как предложения.Он будет растягиваться, чтобы соответствовать содержанию, независимо от того, насколько вы его стройные.

1 голос
/ 05 марта 2011

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

  • FF: 47px + 3px border
  • Chrome: 45px + 2px border
  • IE8: 63px + 8px отступ + 3px border
  • IE7: 61px + 2px border

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

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