ul li div 自动换行

要使ul li div自动换行，可以通过CSS样式来实现。以下是一个简单的例子：

HTML:




<ul class="list-container">
  <li>
    <div>Item 1</div>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <!-- 更多的li元素 -->
</ul>

CSS:




.list-container li {
  display: block; /* 使li块级元素 */
  float: left; /* 让li元素横向排列 */
  clear: left; /* 防止li内部div的影响 */
  width: 100%; /* 让li占满整行宽度 */
}
 
.list-container li div {
  border: 1px solid #000; /* 为了清晰地显示换行效果 */
  margin-bottom: 5px; /* 为了在div之间有间隔 */
}

在这个例子中，ul的直接子元素li被设置为块级元素并且浮动到左边。每个li占据一整行，li内的div会根据可用宽度自动换行。如果需要更多的控制，可以使用Flexbox或Grid布局系统来代替浮动。

ul li div 自动换行

评论已关闭

推荐阅读