html - UL 元素溢出到父容器之外

Question

我在让 li 元素保留在父容器中时遇到了一些麻烦。由于某种原因，他们继续离开页面的右侧。

Overflow: Auto 似乎解决了这个问题，但问题在于它切断了边界并且不允许我正确缩放 li 元素(我想让它们最终成为父容器宽度的 30% 左右)。

谁能解释为什么会发生这种情况或提出替代解决方案？

这是我的代码: https://repl.it/KZXi/0

Answer 1

https://repl.it/KZXi/2问题是默认情况下 box-sizing 属性不包括填充，这就是为什么你的 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