在 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+ 瀏覽量

開啟您的 職業生涯

完成課程以獲得認證

開始
廣告
© . All rights reserved.