当宽度总和等于 100% 时元素断线 [重复]答案

【问题标题】：Elements break line when sum of widths equal 100% [duplicate]当宽度总和等于 100% 时元素断线 [重复]
【发布时间】：2018-08-07 18:28:56
【问题描述】：

我正在尝试将 input 和 button 显示内联，其中 input 需要填充 70% 的行，button 30%

所以，我将 css 设置为元素的 70% 和 30%，但是元素会断线

我该如何解决这个问题？

* {
  margin: 0px;
}

input {
  width: 70%;
}

button {
  width: 30%;
}

<div>
  <input type="text" />
  <button>Button</button>
</div>

【问题讨论】：

标签： css

【解决方案1】：

添加这个：

* {
   box-sizing:border-box;
}

这是因为输入/按钮有浏览器添加的内边距和边框，所以总数最终 > 100%。

上面的代码所做的是告诉所有元素在宽度值中包含填充和边框。

您还会遇到留白问题。基本上因为您的元素位于单独的行上，所以它在中间添加了空格。为了解决这个问题，您可以将它们放在同一行没有空格或注释中间的区域，如下所示：

* {
  box-sizing: border-box;
  margin: 0px;
}
input {
  width: 70%;
  border: 3px solid;
}
button {
  width: 30%;
}

<div>
  <input type="text"><!--
  --><button>Button</button>
</div>

将div 元素设置为具有font-size: 0px; 也可以删除空白，只要您这样做不会影响任何子元素的相对字体大小。

【讨论】：

【解决方案2】：

按钮默认有边框，所以 30 加 70 实际上略高于 100% 试试这个：

input {
  float: left;  
  width: 69%;
}
button {
  float: left;
  margin: 0px;
  width: 30%;
  box-sizing: border-box;
}

【讨论】：