css - 输入和按钮宽度仅占 100% 但不会彼此相邻出现

Question

我有一个黄色的 div，下面是一个背景为红色的输入和一个背景为灰色的按钮。我希望输入和按钮彼此相邻出现，但它不起作用。但这很奇怪，因为我有 80% 的输入和 20% 的按钮，而且两者都没有边距，所以奇怪的是它不起作用。你知道问题出在哪里吗？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  outline: 0;
}

input,
select,
textarea,
button {
  padding: 15px;
  width: 100%;
}

select,
input,
button {
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

img {
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
  margin: 0;
}

a img {
  border: none;
  margin: 0;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}


/*CONTAINER*/

.container {
  float: left;
  width: 100%;
}

.content {
  width: 64%;
  margin: 0 auto;
  padding: 30px 0;
}

.box {
  width: auto;
  float: left;
}

.box-search {
  width: 23.3%;
  margin: 0;
}

.box-small {
  width: 22.75%;
  margin-right: 3%;
  margin-top: 3%;
}

.filter-city {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.filter-city input {
  width: 80%;
  border: 0 !important;
  background-color: red;
  margin-right: 0 !important;
  padding-right: 0;
}

.filter-city button {
  width: 20%;
  margin-left: 0 !important;
  color: $color-white;
  background-color: $color-primary;
  margin-right: 0 !important;
}

<section class="container">
  <div class="content">
    <div class="box box-small filter_results">
      <div style="width:100%; background-color:yellow; height:40px;">

      </div>

      <div class="filter-city">
        <input class="m_top" value="Test" type="text">
        <button><i class="fa fa-search" aria-hidden="true"></i></button>
      </div>
    </div>
    <div class="results"></div>
  </div>
</section>

示例:https://jsfiddle.net/v2j6uetz/

Answer 1

看来问题是由两件事引起的:

1. 输入和按钮之间的空白。

   行内元素和行内 block 元素允许其他元素在一行中紧挨着它们存在，包括空格。两个元素之间的换行符在它们之间引入了一个空格，您的百分比未考虑该空格。
   
   

2. 水平按钮填充大于其计算宽度。

   按钮有 padding:15px，它设置水平和垂直填充。但是您的示例中的按钮宽度小于 15 像素，因此，即使使用 box-sizing:border-box，按钮的宽度也会被推得大于您的百分比。
   
   

这是一个工作示例:

.container {
  float: left;
  width: 100%;
}
.content {
  width: 64%;
  margin: 0 auto;
  padding: 30px 0;
}
.box {
  float: left;
}
.box-search {
  width: 23.3%;
}
.box-small {
  width: 22.75%;
  margin-right: 3%;
  margin-top: 3%;
}

.filter-city input,
.filter-city button {
  padding: 15px 0;
  margin: 0;
  border: 0;
}

.filter-city input {
  width: 80%;
  background-color: red;
}

.filter-city button {
  width: 20%;
  background-color: lightgray;
}

<section class="container">
  <div class="content">
    <div class="box box-small filter_results">
      <div style="width:100%; background-color:yellow; height:40px;"></div>
      <div class="filter-city">
        <input class="m_top" value="Test" type="text"><button>Test</button>
      </div>
    </div>
    <div class="results"></div>
  </div>
</section>