sonovice sonovice - 11 months ago 116
CSS Question

HTML elements not aligned with semantic ui

I am trying to simply show a text input field and a button in one line with semantic ui. For some reason the elements are not aligned properly and I can't figure out the css property that is responsible for this:

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


Update: Corrected closing tag on last div.

Answer Source

You need to float: left; your input div.

Just add this lines to your css:

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

Or vertical-align your input div:

.input {

Edit: and you have problem with the HTML syntax. change button open tag:

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