使容器子元素在 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>

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/