爲什麼行內塊元素在容器內不適合？

我有一個容器元素，其寬度爲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

爲什麼行內塊元素在容器內不適合？

回答

相關問題