在 HTML 中，让容器在子元素换行时按内容就位

我们可以轻松地让容器随着子元素换行而按内容就位。首先，我们将设置 flex 容器 灵活 −

display: flex;

我们将设置 flex 元素换行 −

flex-wrap: wrap;

使用 text-align 属性 设置文本居中 −

text-align: center;

将 list-style-type 属性设置为 None 不显示标记 −

list-style-type: none;

范例

现在，让我们看完整的范例 −

<!DOCTYPE html>
<html>
<title>Flex Example</title>
<head>
   <style>
      ul {
         display: flex;
         flex-wrap: wrap;
         margin: 0;
         padding: 0;
         border: 2px solid red;
      }
      li {
         border: 2px solid orange;
         margin: 10px;
         padding: 10px;
         width: 200px;
         text-align: center;
         list-style-type: none;
      }
   </style>
</head>   
<body>
   <div id="container">
      <ul>
         <li>A</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
         <li>E</li>
         <li>F</li>
         <li>G</li>
         <li>H</li>
      </ul>
   </div>
</body>
</html>

更新日期：20-11-2023

1K+ 浏览量

开启您的 职业生涯

完成课程以获得认证

开始
广告