为什么行内块元素在容器内不适合？

我有一个容器元素，其宽度为560px，高度为80px。在容器内部，我有7个内嵌块元素，它们是80×80（80个宽度×80高度）但由于某种原因，第7个内嵌块元素被切断。（80 * 7 = 560）为什么行内块元素在容器内不适合？

#playerChoice { 
 
     width: 560px; 
 
     height: 80px; 
 
    } 
 

 
    #playerChoice > .choice { 
 
     width: 80px; 
 
     height: 80px; 
 
     display: inline-block; 
 
    }

<div id="playerChoice"> 
 
     <div class="choice" id="choice1"></div> 
 
     <div class="choice" id="choice2"></div> 
 
     <div class="choice" id="choice3"></div> 
 
     <div class="choice" id="choice4"></div> 
 
     <div class="choice" id="choice5"></div> 
 
     <div class="choice" id="choice6"></div> 
 
     <div class="choice" id="choice7"></div> 
 
    </div>

来源

2017-04-11 Steez

我通常注释掉多余的空白，即使它是丑陋的，因为它不要求你改变任何现有的代码，你”已经写好了。 – Slime

内联块将包含你的div之间的空白。你有两个选择：从你的HTML中删除所有的空白，并有丑陋的HTML，或者你可以选择显示块而不是显示内嵌块并将它们浮动。 – jas7457

内联元素包括存在于标记的额外的空格，以及用于像克，Ĵ，p字母伸高度，q，y。这个额外的空白空间使元素大于你所期望的。

虽然有are workarounds继续使用inline-block我会推荐使用flexbox或浮动它们，如果你不能使用flexbox。

Flexbox的解决方案

* { 
 
    box-sizing: border-box; 
 
} 
 
#playerChoice { 
 
    display: flex; 
 
    width: 560px; 
 
    height: 80px; 
 
    border: 1px dashed indianred; 
 
} 
 

 
.choice { 
 
    flex-grow: 1; 
 
    border: 1px dashed #ccc; 
 
}

<div id="playerChoice"> 
 
    <div class="choice" id="choice1">1</div> 
 
    <div class="choice" id="choice2">2</div> 
 
    <div class="choice" id="choice3">3</div> 
 
    <div class="choice" id="choice4">4</div> 
 
    <div class="choice" id="choice5">5</div> 
 
    <div class="choice" id="choice6">6</div> 
 
    <div class="choice" id="choice7">7</div> 
 
</div>

来源

2017-04-11 16:44:24 hungerstar

谢谢！我只是看了一下。就我而言，我的网页上没有任何文字，所以我可以设置字体大小：0作为解决方法。 – Steez

为什么行内块元素在容器内不适合？

回答

相关问题