从宽度100%和元素中否定多个像素的方法？

Question

我有一个简单的搜索表单:

<div class="search">
  <input placeholder="Search term here">
  <button>
    Go
  </button>
</div>

当然,按钮位于输入的右侧.但是,在移动设备上,我想反过来 - 让左边的按钮.

为此,我创建了:

.search {
  width: 100%;
}

input {
  float: right;
  width: 100%;
  height: 30px;
}

button {
  float: left;
  width: 30px;
  height: 30px;
}

https://jsfiddle.net/ufLoj5se/5/

但当然这会将按钮推到第二行.

有没有办法从输入中取消按钮的30px宽度,让按钮紧贴在左边？

Answer 1

您可以使用弹性盒，而不是围绕浮动进行杂耍。

您可以将元素放置在任何您需要的位置，更精确地取决于您的屏幕分辨率。

这是你可以做的。

.search {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
input {
  width: 100%;
  height: 30px;
  order: 1;
}
button {
  width: 30px;
  height: 30px;
  order: 2;
}
@media only screen and (max-width: 480px) {
  button {
    order: 1;
  }
  input {
    order: 2;
  }
}

<div class="search">
  <input placeholder="Search term here">
  <button>
    Go
  </button>
</div>