Question

我的HTML结构如下

<div class="box-search-select">

  <div class="search-left">
    <input id="search" type="text">
  </div>

  <button type="submit" class="button">Search</button>

  <div style="clear:both"></div>

</div>

和CSS如下

.box-search-select{
  width:100%;
  padding:20px 0;
}
.search-left{
  float:left;
  width: 90%;
}
.search-left input{
  width:100%;
}
button{
  float:right;
}

输出:(正常屏幕尺寸）

我想将“search-left”div宽度扩展为“搜索”按钮。

哪个也适用于流体响应布局。

如果你想玩，我在这里创造了小提琴：https://jsfiddle.net/j7g8143a/1

现在，如果我减小屏幕宽度，则搜索按钮会移动到下一行，如下图所示

但我希望“搜索左”div根据屏幕大小自动调整宽度，如下图所示。

我只需要CSS解决方案而不使用任何媒体查询

编辑：它必须与IE9兼容。

Answer 1

您可以使用Flexbox

.box-search-select {
  display: flex;
  align-items: center;
}
.search-left {
  flex: 1;
}
input {
  width: 100%;
}

<div class="box-search-select">
  <div class="search-left"><input id="search" type="text"></div>
  <button type="submit" class="button">Search</button>
</div>

您也可以使用CSS表格

.box-search-select {
  display: table;
}
.search-left,
button {
  display: table-cell;
  vertical-align: middle;
}
.search-left {
  width: 100%;
}
input {
  width: 100%;
}

<div class="box-search-select">
  <div class="search-left"><input id="search" type="text"></div>
  <button type="submit" class="button">Search</button>
</div>

Answer 2

以下是您的演示解决方案，它也适用于IE9 ：

<div class="box-search-select">
  <div class="search-left">
  <input id="search" type="text">
</div>
<button type="submit" class="button">Search</button>
</div>

.box-search-select {
  padding: 20px 68px 20px 0; /* give padding-right equal to button witdh */
  position: relative;
}

.search-left input {
  display: block;
  width: 100%;
}

button {
  background: #cccccc none repeat scroll 0 0;
  border: 1px solid #dddddd;
  padding: 1px;
  position: absolute;
  right: 0;
  top: 20px;
  width: 60px;
}

演示： https://jsfiddle.net/0u83dbm7/

Answer 3

我认为它会起作用

<div class="box-search-select">

  <div class="search-left" style="width:80%">
    <input id="search" type="text">
  </div>

  <button type="submit" class="button">Search</button>

  <div style="clear:both"></div>

</div>
<style>
#search{
    width:100%;
}
.box-search-select{
  width:100%;
  padding:20px 0;
}
.search-left{
  float:left;
  width: 90%;
}
.search-left input{
  width:100%;
}
button{
  float:right;
}
</style>

如果这不是预期的输出，请告诉我。

Answer 4

将输入和按钮放在div中并使用display：flex

.box-search-select{
  padding:20px 0;
  float:left;
  width:100%
}
.search-left{
  float:left;
  width:100%;
  display:flex;

}
.search-left input{
  width:100%
}
button{
  float:right;
}

<div class="box-search-select">

  <div class="search-left">
    <input id="search" type="text">
    <button type="submit" class="button">Search</button>
  </div>
    <div style="clear:both"></div>  
</div>

将搜索div扩展为按钮

4 个答案: