当宽度总和等于100%时,元素断线

Question

我正在尝试将一个input和一个button显示内联,input需要填充70%的行,button30%

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

我该如何解决这个问题？

* {
  margin: 0px;
}

input {
  width: 70%;
}

button {
  width: 30%;
}

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

Answer 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;也可以删除空白区域,只要这样做不会影响任何子元素的相对字体大小.