为什么ul列表超出div class =“ col”

如何解决为什么ul列表超出div class =“ col”

我在<li>内创建了一个<div>，但它在div之外
我尝试使用更清晰（从另一个类似的问题），但似乎对我不起作用，我应该使用左浮动吗？因为当我使用display:flex时有效

.clearer {
  height           : 0;
  clear            : both;
  }
#listTopik li{
  background-color : red;
  padding          : 5px 40px 5px 40px;
  border-radius    : 5px;
  margin-left      : 10px;
  color            : white;
  }    
#listTopik {
  list-style       : none;
  display          : flex;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="col-md-5">
  <h3>Topic</h3>
  <div class="col-md-5" style="width:100%">
    <ul id="listTopik">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
    <div class="clearer"></div>
  </div>
</div>

在div之外列出：

解决方法

由于display:flex， ul 从div中溢出，由于您使用的是 Bootstrap ，因此您实际上可以通过添加{{1 }}上的 ul 标签并保持响应能力。检查下面的代码。

class="row"

div {
background: gray;
}
.list-container {
  background: blue;
}

.clearer {
  height:0;
  clear:both;
  
}
#listTopik li{
  background-color:red;
  padding:5px 40px 5px 40px;
  border-radius: 5px;
  color:white;
  margin: 5px;
}    
    
#listTopik {
  list-style:none;
}

尝试将父ID #listTopik设置为position：相对于max-width，将#listTopik li设置为位置：绝对

 <div class="col-md-5 temp">
                    <h3>Topic</h3>
                    <div class="col-md-5 temp" style="width:100%" >
                        <ul id="listTopik">
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
        
                        </ul>
                    </div>
                    </div>


.clearer {

     height:0;
     clear:both;
    }
#listTopik li{
            background-color:red;
            padding:5px 40px 5px 40px;
            border-radius: 5px;
            margin-left:10px;
            color:white;
            margin-bottom:10px
           
        }    
    
    #listTopik {
            list-style:none;
            flex-wrap: wrap;
            display:flex;
        }