考慮一個場景,其中
當使用百分比填充時,它是相對於包含塊的寬度,在這種情況下,
ul>。問題是由於在確定容器寬度之前無法解決百分比填充的問題。
Beispiel
li { display: inline-block; padding: 0 5%; /* Percentage padding */ border: 1px solid black; } header { display: flex; } ul { border:1px solid red; }為了更好地說明此行為,請考慮以下程式碼:
console.log(document.querySelector('ul').offsetWidth);如果我們在控制台中執行以下JavaScript,我們將可以看到的寬度應用填充後:這將輸出
以上是為什麼 Flex 項目在使用百分比填滿時會換行?的詳細內容。更多資訊請關注PHP中文網其他相關文章!