UL元素溢出父容器外

Question

我有點麻煩讓我的li元素留在父容器中。出於某種原因，它們繼續從頁面的右側移開。

Overflow: Auto似乎解決了這個問題，但問題是它切斷了邊框，並且不允許我正確縮放li元素（我希望它們的父容器寬度大約爲30％最終）。

任何人都可以解釋爲什麼會發生這種情況或建議一種替代解決方案嗎？

這裏是我的代碼： https://repl.it/KZXi/0

Answer 1

https://repl.it/KZXi/2 問題是由默認箱集束性排除了填充，這就是爲什麼你的li元素包含其父超過100％，請閱讀https://www.w3schools.com/cssref/css3_pr_box-sizing.asp 爲了解決只加..

.answerBox { 
    border: 2px solid black; 
    background-color: white; 
    padding: 40px; 
    width: 100%; 
    height: 130px; 
    box-sizing: border-box; 
    /*margin-left: 20px; 
    margin-bottom: 30px;*/ 
} 

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

您可以更改箱上漿列表元素包括填充。

box-sizing:border-box 

目前列表元素是100％的寬度+填充左：40像素和padding-右：40像素，使他們溢出父容器。

Answer 3

試試這個CSS的li：

li.answerBox { 
    border: 2px solid black; 
    background-color: white; 
    padding: 4%;   /* <---- */ 
    width: 91%;    /* <---- */ 
    height: 70px; 

問題是，當您給填充和邊框時，內容溢出。