HTML-ввод [type = text] занимает оставшуюся часть строки - PullRequest
Новая
       5

HTML-ввод [type = text] занимает оставшуюся часть строки

1 голос
/ 07 октября 2011

Я пытался и пытался заставить это успешно работать без , используя таблицы в IE7 + безрезультатно.

Рабочий, но не очень желательный код: 

<table>
  <tr>
    <td><label for="address">Address</label></td>
    <td><input type="text" name="address" value="" id="address" style="width: 100%;"/></td>
    <td><a href="#">Find</a></td>
  </tr>
</table>

То, что это будет делать, имеет: Address [INPUT TEXT] Find. Все они будут в одной строке, а поле ввода занимает 100% доступного пространства, не нажимая метку или a на следующую строку.

Я не могу заставить себя работать без таблиц.

Вход, комментарии, ссылки приветствуются!

Ответы [ 2 ]

4 голосов
/ 07 октября 2011

См. , это jsfiddle , обе альтернативы на одном экране.

1 голос
/ 07 октября 2011

См .: http://jsfiddle.net/thirtydot/PLsuG/

Это хорошее решение, которое работает в IE7+ и во всех современных браузерах.

Это очень похоже на второе решение @ CyberDude.

HTML: 

<div class="formLine">
    <label for="address">Address</label>
    <a href="#">Find</a>
    <span><input type="text" name="address" id="address" value="" /></span>
</div>

CSS: 

.formLine {
    overflow: hidden;
    background: #ccc
}
.formLine input {
    width: 100%
}
.formLine label {
    float: left
}
.formLine span {
    display: block;
    overflow: hidden;
    padding: 0 5px
}
.formLine a {
    float: right
}
.formLine input, .formLine a { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
...