Элементы HTML, не совпадающие с семантической ui

Я пытаюсь просто показать текстовое поле ввода и кнопку в одной строке с семантическим ui. По какой-то причине элементы не выровнены должным образом, и я не могу понять, свойство CSS, который отвечает за это:Элементы HTML, не совпадающие с семантической ui

<div id="filter-input" class="ui left icon input"> 
    <i class="search icon"></i> 
    <input type="text"> 
</div> 
<div class="ui button">Test</div>

CodePen

Update: Исправленного закрывающего тег на последних дела.

источник

2016-10-22 sonovice

Необходимо ввести float: left; ваш входной div.

Просто добавьте эти строки в CSS:

.input { 
    float: left; 
    margin-right: 5px; 
}

Или вертикального выравнивания ваш входной DIV:

.input { 
    vertical-align:middle; 
}

Edit: и у вас есть проблемы с синтаксисом HTML , Кнопка изменения открытой тег:

<button class="ui floating button">Test</button>

источник

2016-10-22 16:23:12

Спасибо, это сработало. Закрывающим тегом была ошибка c & p. Я все еще не понимаю, почему это не сработает, если явным образом не позволяю входному элементу float? – sonovice

Вы можете изменить вертикальное выравнивание до середины и решить свою проблему. следующий элемент после входной базы в нижней строке. im edit my answer –

это не

<div class="ui button">Test</button>

должен быть

<div class="ui button">Test</div>

попробуйте поместить внутрь DIV ...

<div id="filter-input" class="ui left icon input"> 
    <i class="search icon"></i> 
    <input type="text"> 
    <div class="ui button">Test</div> 
</div>

источник

2016-10-22 16:23:25

Спасибо, это тоже работает. Но поскольку я хотел бы разместить несколько кнопок в строке, я предпочитаю принятое решение. Извините за это, вы были быстры, как молния ... – sonovice

Элементы HTML, не совпадающие с семантической ui

ответ

Смежные вопросы