1

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.

sonovice
  • 813
  • 2
  • 13
  • 27

2 Answers2

1

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>
Zeev Katz
  • 2,273
  • 2
  • 16
  • 42
  • Thanks, it worked. The closing tag was a c&p error. I still don't get why this would not work without explicitly letting the input element float? – sonovice Oct 22 '16 at 16:28
  • 1
    You can change your vertical align to middle and its solved your proplem. the next element after the input base on the bottom line. im edit my answer – Zeev Katz Oct 22 '16 at 16:35
1

not this

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

should be

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

try put inside the 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>
Donald Wu
  • 698
  • 7
  • 20
  • Thanks, this also works. But since I would like to place multiple buttons in the line, I prefer the accepted solution. Sorry for that, you were fast like a lightning... – sonovice Oct 22 '16 at 16:32