当宽度总和等于100％时，元素断线

Question

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

因此，我将css的70％和30％设置为元素，但元素将会断行

如何解决此问题？

＆＃13;

＆＃13;

* {
  margin: 0px;
}

input {
  width: 70%;
}

button {
  width: 30%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加：

* {
   box-sizing:border-box;
}

这是因为输入/按钮具有由浏览器添加的填充和边框，因此总计结束＆gt; 100％。

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

你也会遇到白色间距问题。基本上因为您的元素在一个单独的行上，它会在中间添加空白。为了解决这个问题，您可以将它们放在同一条线上，没有空格，也可以对它们之间的区域进行评论，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

将div元素设置为font-size: 0px;也可以删除空格，只要您不影响任何子元素的相对字体大小即可

Answer 2

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

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