<input> на всю ширину

Имеется такой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Test</title>
    <style>
        body > div {
            clear:both;
            overflow:hidden;
            width:400px;
        }
        body > div * {
            float:left;
        }
    </style>
</head>
<body>
<div>
    <div>Floating size</div>
    <input />
    <div>Fixed size</div>
</div>
<div>
    <div>Really floating size</div>
    <input />
    <div>Fixed size</div>
</div>
</body>
</html>


Необходимо сделать на всю доступную ширину родительского дива.
  • Вопрос задан
  • 18228 просмотров
Пригласить эксперта
Ответы на вопрос 5
Если не смущают косяки в ie<8:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <style type='text/css'>
    body > div {
      width:400px;
    }
    .row {
      display:table-row;
    }
    .row input[type=text]{
      width:100%;
    }
    .row div:first-child {
      display:table-cell; white-space:nowrap;
    }
    .row div:nth-child(2){
      display:table-cell;
      width:100%;
      padding-right:4px;
    }
    .row div:nth-child(3){
      width:40px;
    }
  </style>
</head>
<body>
<div>
  <div class='row'>
    <div>Floating size</div>
    <div>
      <input type='text'/>
    </div>
    <div>40px;</div>
  </div>
</div>
<div>
  <div class='row'>
    <div>Really Floating size</div>
    <div>
      <input type='text'/>
    </div>
    <div>40px;</div>
  </div>
</div>
</body>
</html>


* This source code was highlighted with Source Code Highlighter.


Ответ написан
Комментировать
alexbaum
@alexbaum
JS-разработчик, наставник.
Ответ написан
Комментировать
timursun
@timursun
Creative project/product manager
Обычный «width:100%;» не решает проблему?
Ответ написан
dom1n1k
@dom1n1k
Это один из немногих случаев-исключений, когда целесообразно «нецелевое» использование таблиц.
Вариант с дивами и CSS-ужимками, безусловно, также возможен — но как ни крути, он не будет 100% надежен и совместим. А таблицы бронебойны.
Ответ написан
Комментировать
almazmusic
@almazmusic
.text { padding-left: 6px; }
.text input { width: 100%; }

По умолчанию бордюр у инпута с обоих сторон — 6 пкс. Там ещё есть фича для инпута в таком родителе { float: left; overflow: hidden; } — это там для ие6-7, для ситуации с таблицами.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы