1

我试图简单地在一行中显示一个文本输入字段和一个带有语义 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>

代码笔

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

4

2 回答 2

1

您需要float: left;输入 div。

只需将此行添加到您的 css 中：

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

或垂直对齐您的输入 div：

.input {
  vertical-align:middle;
}

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

<button class="ui floating button">Test</button>
于 2016-10-22T16:23:12.727 回答
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>
于 2016-10-22T16:23:25.110 回答