在同一行上呈现元素，使输入元素占用所有可用空间。

Question

我希望图标、输入框和按钮在同一行显示。

由于使用了display: inline-block，输入框的宽度被减小了。

我尝试过将按钮使用绝对定位并给外部div添加相对定位，或者将输入框和按钮浮动，但是到目前为止都没有起作用。

非常感谢您的帮助。提前致谢！

下面是我的代码结构。

.first {
  border: 1px solid red;
  padding: 10px 15px;
}

i {
  margin-right: 19px;
  color: purple;
}

.third {
  display: inline-block;
}

input {
  width: 100%;
}

.fourth {
  float: right !important;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="first">
  <div clas="second">
    <i class="material-icons">&#xE8B6;</i>
    <div class="third">
      <input type="search" />
    </div>
  </div>
  <div class="fourth">
    <button>Click</button>
  </div>
</div>

https://jsfiddle.net/2a04ds2y/1/

- Raerae

Answer 1

学习有关Flexbox的知识。保持简单：

.first {
  display: flex;
  border: 1px solid red;
  padding: 10px 15px;
}

input {
  flex: 1; /* tells input to consume all free space on the line */
}

i {
  margin-right: 19px;
  color: purple;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="first">
  <i class="material-icons">&#xE8B6;</i>
  <input type="search" />
  <button>Click</button>
</div>

{{链接1：jsFiddle}}

- Michael Benjamin

---

谢谢！由于我无法简化代码结构，最终我做了类似这样的事情：https://jsfiddle.net/2a04ds2y/3/ - Raerae

Answer 2

使用 float: left 并添加 clear: both div

JSFIDDLE

- jkythc