CSS элемент переменной ширины для заполнения пространства - PullRequest
Новая
       4

CSS элемент переменной ширины для заполнения пространства

9 голосов
/ 05 июня 2010

В форме я хотел бы, чтобы input: text заполнял оставшееся пространство после выравнивания по левому и правому краям надписи на форме.

Метка имеет количество символов, поэтому я не могу установитьфиксированная ширина надписи.

Пример кода: 

<fieldset>
<legend>User Info</legend>
<p><label>First Name :</label><input type="text"...></p>
<p><label>Last Name : </label><input type="text"...></p>
<p><label>Completed Email Address :</label><input type="text"...></p>
</fieldset>

Как оформить ввод для заполнения оставшегося пространства после текста.

Спасибо.

Ответы [ 3 ]

7 голосов
/ 05 июня 2010 
<!doctype html>
<html>
<head>
    <style>
        .grid { width: 100%; display: table; table-layout: auto; }
        .row { display: table-row; }
        label.cell { white-space: nowrap; display: table-cell; }
        span.cell { width: 100%; display: table-cell; }
        span.cell input { width: 100%; display: block; }
    </style>
</head>
<body>
    <fieldset>
        <legend>User Info</legend>
        <div class="grid">
            <div class="row"><label class="cell">First Name:</label> <span class="cell"><input type="text" /></span></div>
        </div>
        <div class="grid">
            <div class="row"><label class="cell">Last Name:</label> <span class="cell"><input type="text" /></span></div>
        </div>
        <div class="grid">
            <div class="row"><label class="cell">Completed Email Address:</label> <span class="cell"><input type="text" /></span></div>
        </div>
    </fieldset>
</body>
</html>

Не будет работать в старых браузерах.

LE: если вам не нужно / нужно / нужно поддерживать старые браузеры, такие как IE 6 и 7, используйте этот код. В противном случае используйте JavaScript. Или используйте этот код в JavaScript для IE 6 и 7. Да, я думаю, что это лучший способ сделать это: D

6 голосов
/ 06 июня 2010

Сначала я написал это в комментарии, но вместо этого мне посоветовали опубликовать ответ.Это не решение CSS, а решение на основе таблиц.Тем не менее, он должен работать во всех браузерах (хотя я не проверял это).span внутри метки td необходимо для обхода ошибки IE в том, что white-space: nowrap не применяется к ячейкам таблицы.

3 голосов
/ 24 мая 2011

Вы можете попробовать использовать значения с плавающей запятой для левой (или правой) стороны и "контекст форматирования блока", если вы указываете элементы правой стороны.

Читайте о контекстах форматирования блока в css в YUIblog

Скрипка: http://jsfiddle.net/uS3Cv/1/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...