如何删除浮动的h1标签之间的换行符？

Question

为什么中间和最后一个浮动的h1标签之间有换行符？

.div {
  border-style: solid;
  display: inline-table;
  border-color: #91b8f7;
  vertical-align: top;
}

<div class="div" style="height: 200px; width: 55%">
  <div>
    <h1 style="display: inline-block; float: left;">1</h1>
    <h1 style="display: inline-block; float: right; padding-right: 60%">2</h1>
    <h1 style="display: inline-block; float: right; padding-right: 10%;">3</h1>
  </div>
</div>
<div class="div" style="height: 200px; width: 30%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 15%">
  <p>dsfdsfdsfsfds</p>
</div>

Answer 1

您的代码有两个主要问题：

1-您需要为.div类的CSS添加“ box-sizing：border-box”。如果没有此设置，默认情况下，浏览器会将边框的宽度添加到div的宽度中，因此它们比您要告诉它们的百分比略大。 Border-box使浏览器在您设置的宽度中包括边框。 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

2-您的div之间不能有任何空格，否则该微小的空间会将您的第三个div推到下一行。我消除了一个关闭和另一个开始之间的空间。如果不想这样做，可以选择flex或grid display。

.div {
  box-sizing: border-box;
  border-style: solid;
  display: inline-table;
  border-color: #91b8f7;
  vertical-align: top;
}

<div class="div" style="height: 200px; width: 55%">
  <div>
    <h1 style="display: inline-block; float: left;">1</h1>
    <h1 style="display: inline-block; float: right; padding-right: 60%">2</h1>
    <h1 style="display: inline-block; float: right; padding-right: 10%;">3</h1>
  </div>
</div><div class="div" style="height: 200px; width: 30%">
  <p>dsfdsfdsfsfds</p>
</div><div class="div" style="height: 200px; width: 15%">
  <p>dsfdsfdsfsfds</p>
</div>