Question

我有一个黄色的div，下面是一个带有背景红色和背景为灰色的buttoun的输入。我希望输入和按钮看起来彼此相邻，但它不起作用。但它很奇怪，因为我有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

您是否检查过Firebug或Chrome Developer工具中的“显示”？ IIRC，输入默认为块级元素，因此应用像“display：inline-block;”这样的属性。必要的输入应该解决问题。

Answer 2

你应该在需要彼此相邻的div和包含div的div上使用float : left。

Answer 3

似乎问题是由两件事造成的：

输入和按钮之间的空白区域。

内联块和内联块元素允许其他元素在一行（包括空格）旁边存在。两个元素之间的换行符在它们之间引入了一个空间，而这个空间并不是由您的百分比来计算的
水平按钮填充大于其计算宽度。

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

这是一个有效的例子：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

如果您只是添加

filter-city {
    display: flex;
    ....
}

它应该有用。

https://jsfiddle.net/g97qf57o/

说实话，我不完全确定为什么会这样，但根据我的经验，flexbox可以解决大多数布局问题。

输入和按钮宽度仅占100％，但不会彼此相邻

4 个答案: