sonovice sonovice - 1 month ago 23
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>
<div class="ui button">Test</div>


CodePen

Update: Corrected closing tag on last div.

Answer

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 {
  vertical-align:middle;
}

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

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