与语义ui不对齐的HTML元素

Question

我试图简单地显示一个文本输入字段和一个按钮在一行与语义用户界面。由于某些原因，元素没有正确对齐，因此我无法确定负责此操作的css属性：

<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

更新：更正了上一个div的结束标记。

Answer 1

您需要float: left;您的输入div。

只需将这一行添加到css:中即可

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

或垂直对齐输入div:

.input {
  vertical-align:middle;
}

编辑：和您对HTML语法有问题。更改按钮打开标签：

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

Answer 2

不是这个

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

应该是

<div class="ui button">Test</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>