<分区>
<分区>
我有一系列 8 个 div，我在父容器内水平对齐。每个子 div 都是 12.5%，所以当在整个页面上布局时，这将加起来达到父级的 100%。由于没有足够的空间，最终的 div 被推到了其他 div 的下方，这似乎是由每个 div 右侧的神秘空白引起的。
有谁知道是什么导致了这个空白，更重要的是，如何删除它？
body {margin: 0; padding: 0;}
#main-content {
width: 100%;
height: 100%;
position: relative;
}
.linebox{
margin: 0; padding: 0;
width: 12.5%;
display: inline-block;
background: orange;
border-right: 1px solid black;
box-sizing: border-box;
height: 100vh;
position: relative;
} <main id="main-content">
<div class="linebox" id=linebox-1></div>
<div class="linebox" id=linebox-2></div>
<div class="linebox" id=linebox-3></div>
<div class="linebox" id=linebox-4></div>
<div class="linebox" id=linebox-5></div>
<div class="linebox" id=linebox-6></div>
<div class="linebox" id=linebox-7></div>
<div class="linebox" id=linebox-8></div>
</main>最佳答案
您有 2 个选项，将字体大小设置为:0 以删除空格，或者您的主要内容需要使用 Flex，例如:
body {margin: 0; padding: 0;}
#main-content {
width: 100%;
height: 100%;
position: relative;
font-size: 0; // choose one
display: flex; // or this...
}
.linebox{
margin: 0; padding: 0;
width: 12.5%;
display: inline-block;
background: orange;
border-right: 1px solid black;
box-sizing: border-box;
height: 100vh;
position: relative;
} <main id="main-content">
<div class="linebox" id=linebox-1></div>
<div class="linebox" id=linebox-2></div>
<div class="linebox" id=linebox-3></div>
<div class="linebox" id=linebox-4></div>
<div class="linebox" id=linebox-5></div>
<div class="linebox" id=linebox-6></div>
<div class="linebox" id=linebox-7></div>
<div class="linebox" id=linebox-8></div>
</main>关于html - 将 div 与内联 block 对齐时出现空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48372778/