Таблица CSS - Расширить поле ввода на всю длину без переноса на новую строку - PullRequest
Новая
       15

Таблица CSS - Расширить поле ввода на всю длину без переноса на новую строку

3 голосов
/ 17 декабря 2009

У меня есть форма со следующими элементами: 

<div>
   <label>Name</label>
   <input type="text" name="name" />
</div>

<div>
   <label>Address</label>
   <input type="text" name="address" />
</div>

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

Если я попытаюсь установить ширину на 100%, то поля ввода переносятся на новую строку, чтобы расширить всю ширину.

Как я могу сделать так, чтобы метки (чья ширина была переменной) располагались слева от полей ввода, и чтобы эти поля ввода расширялись, чтобы соответствовать содержащему их div?

Вот мой текущий CSS: 

#content form input
{
   border: none;
   height: 23px;
   position: relative;
   top: -1px;
   left: -5px;
   padding-top: 5px;
   text-indent: 10px;
   display: inline-block;
}  

#content form label
{
   background: #c6c9c0 url('../images/form-label-bg.jpg') no-repeat center right;
   height: 28px;
   line-height: 30px;
   display: inline-block;
   text-indent: 15px;
   padding-right: 25px;
   color: #6a6a6a;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 8pt;
}

Ответы [ 2 ]

3 голосов
/ 17 декабря 2009

попробуйте это: 

form div {
    display: table;
    width: 100%;
}
label,
input { 
    display: table-cell;
}
label{ 
    width: 200px;
}
input {
    width: 100%;
}
1 голос
/ 17 декабря 2009

Я не думаю, что это возможно даже при использовании таблиц, поскольку все «столбцы» в таблице также будут иметь одинаковую ширину.

Вы должны вручную определить ширину для входных данных, я полагаю. Используйте% вместо px, хотя.

...