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; 

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