HTML元素与语义ui不对齐

时间:2016-10-22 16:18:14

标签: html css semantic-ui semantic-ui-css

我试图用语义ui简单地在一行中显示文本输入字段和按钮。由于某种原因,元素没有正确对齐,我无法找出导致此问题的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的结束标记。

2 个答案:

答案 0 :(得分:1)

您需要float: left;输入div。

只需将此行添加到您的css:

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

或垂直对齐您的输入div:

.input {
  vertical-align:middle;
}

编辑,您的HTML语法有问题。更改按钮打开标签:

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

答案 1 :(得分:1)

不是这个

<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>