CSS之排列系列--顶部导航栏ul、li居中展示的方法

红太狼 2024-03-30 03:29 146阅读 0赞

原文网址：CSS之排列系列—顶部导航栏ul、li居中展示的方法_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍CSS顶部导航栏ul、li居中展示的方法。

核心方法

ul的父层使用：text-align: center

ul元素使用：display: inline-block;

示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>导航条水平居中</title>
  6.     <style>
  7.         nav {
  8.             text-align: center;
  9.         }
  11.         nav ul {
  12.             display: inline-block;
  13.         }
  15.         nav ul li {
  16.             float: left;
  17.             list-style: none;
  18.             margin: 0 10px;
  19.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <nav>
  25.     <ul>
  26.         <li>aa</li>
  27.         <li>bb</li>
  28.         <li>cc</li>
  29.         <li>dd</li>
  30.         <li>ee</li>
  31.     </ul>
  32. </nav>
  33. </body>
  34. </html>

结果

521c8dbba1ba4dc6bb1682351aeb8988.png

发表评论

表情：
评论列表 （有 0 条评论，146人围观）

还没有评论，来说两句吧...

相关阅读