Динамическая ширина у input и select

#html #css #input #форма #html_select

                    
Есть форма с полями типа text и select со стоящими в линию метками (label). Все метки
и поля могут иметь различную длину (ну, как всегда в формах). label'ы выравниваются
влево, input и select левым краем примыкают к label, и в общем-то цель состоит в том,
чтобы выровнять инпуты и селекты по правому краю так, чтобы они как бы растягивались
автоматически от конца label до правого края контейнера и в итоге имели различную длину,
но четкое выравнивание справа. Картинки загружать не дают, попробую тут нарисовать

Как по умолчанию:

Метка поля --------------

Более длинная метка поля --------------

Ещё метка поля --------------

Как нужно мне:

Метка поля -------------------------------------

Более длинная метка поля ----------------

Ещё метка поля -------------------------------
    

Ответы

Ответ 1

Можно например так: http://jsfiddle.net/DdnQ2/



table{
    width:500px;
}
td{
    width:0;
    white-space:nowrap;
}
td.field{
    width:100%;
}
input{
    width:100%;
}

    

        

            слово
        
        

            
        
    


    

        

            длинное слово
        
        

            
        
    





Некоторых особо крутых верстальщиков смущает использование таблиц для позиционирования
элементов. Чтобы таковые не смущались, можно выполнить рекомендацию w3c и поставить
таблицам атрибут role=presentation


Ответ 2

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



/* Reset CSS */
* {
  box-sizing: border-box;
  outline: 0;
  margin: 0;
}

.divMain:after {
  content: '';
  display: block;
  clear: both;
}
.divA {
  float: left;
}
.divB {
  overflow: hidden;
}
.divB input {
  width: 100%;
}

  

    Я редактируюсь!