在同一行上渲染元素，输入元素占用所有可用空间

Question

我想要图标，input和button是内联的。

由于input，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/

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>

jsFiddle

Answer 2

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

JSFIDDLE