UL元素在父容器外溢出

Question

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

Overflow: Auto似乎解决了这个问题，但问题在于它切断了边界并且不允许我正确地扩展li元素（我想要它们最终约为父容器宽度的30％。

任何人都可以解释为什么会发生这种情况或提出替代解决方案吗？

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

Answer 1

您可以更改列表元素的大小调整以包含填充。

box-sizing:border-box

目前你的列表元素是100％宽度+填充左边：40px和padding-right：40px因此它们溢出父容器。

Answer 2

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

Answer 3

尝试将此CSS发送到li：

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

问题是，当你给出填充和边框时，内容会溢出。