semanti-ui full-width input в меню

Question

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

Обычно в semantic-ui я бы рассматривал ввод жидкости, но это не похоже на работу внутри семантического меню. Когда применяется «жидкость», вход становится меньше.

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

<div class="ui fixed borderless menu"> 

    <div class="header"> 
     <a href="/" class=""> 
     <img src="logo.png"> 
     </a> 
    </div> 

    <div class="item"> 
     <div class="ui left icon input"> 
     <i class="search icon"></i> 
     <input type="text" placeholder="search"> 
     </div> 
    </div> 

    <div class="right item"> 
     <div class="ui left icon input"> 
     <i class="map outline icon"></i> 
     <input type="text" placeholder="location"> 
     </div> 
    </div> 

    </div> 

Answer 1

Установить свойство отображения элементов на display: inline-block.

Задайте свойства ширины для относительных значений элементов, то есть используйте проценты вместо пикселей.

Задайте значения свойств ширины для элементов так, чтобы они составляли до 100%.

Удалите все дополнительные поля и/или простыни со страницы.

* { 
    margin: 0; 
    padding: 0; 
} 

Answer 2

Вы можете установить flex-grow до 1 для стиля css элемента.

<div class="category search item" style="flex-grow:1;"> 
    <div class="ui icon input"> 
     <input class="prompt" placeholder="Search..." type="text"> 
     <i class="search link icon"></i> 
    </div> 
    <div class="results"></div> 
</div> 

испытаны и работа с Semantic UI 2.2.13