Поле ввода должно занимать оставшуюся ширину

Question

Я пытаюсь создать форму для добавления новых пользователей в какой-либо объект. Идея состоит в том, чтобы иметь пользовательские аватары в строке, а в конце строки есть входное поле с typeahead для вставки новых пользователей.

Я пробовал это несколько лет назад и в итоге использовал javascript, поскольку я не смог сделать это в простой css (2).

Большой вопрос: это как-то возможно в css3?

Основная идея кода:

<div class="availableWidth"> 
    <div class="list"> 
    <ul> 
    <li><div class="avatar">...</div></li> 
    ... 
    </ul> 
    </div> 
    <div class="form"> 
    <div class="typeaheadField"> 
     <input ...> 
    </div> 
    <button>+</button> 
    </div> 
</div> 

CSS:

.list ul li { 
    list-style-type:none; 
    display:inline-block; 
} 

button { 
    width:50px; 
} 

Основная идея заключается в том, что коробка .availableWidth имеет некоторую ширину (100%) коробка .list растет в ширину (при добавлении новых элементов li), поскольку поле .form должно уменьшаться по ширине. Прямо на вход - кнопка с несколькими пикселями. Вход должен занимать оставшееся пространство.

Возможно ли это в css3 или мне нужен Javascript?

Answer 1

Вы можете использовать flexbox, или вы можете использовать атрибуты таблицы отображения в CSS. Посмотрите:

.container { 
 
    display: table; 
 
    width: 100%; 
 
    position:relative; 
 
} 
 
.avatar { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: table-cell; 
 
} 
 
.input { 
 
    height: 50px; 
 
    display:table-cell; 
 
    vertical-align: middle; 
 
} 
 
.input input { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
}

 <div class="container"> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="input"> 
 
      <input type="text"/> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="container"> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="avatar"> 
 
      <img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/> 
 
     </div> 
 
     <div class="input"> 
 
      <input type="text"/> 
 
     </div> 
 
    </div>

Вы можете добавить все аватары, которые вы хотите на левой стороне и вход переставить автоматически.

Answer 2

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

Вот последний http://jsfiddle.net/53f0yzeL/

Примечание overflow:hidden правило .avatars-wrapper, он делает контейнер точно подогнаны между плавали элементами и .avatars сторону, так что вы можете сделать вход 100% в ширину.