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

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

简介

说明

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

核心方法

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

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

示例

html 复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>导航条水平居中</title>
    <style>
        nav {
            text-align: center;
        }

        nav ul {
            display: inline-block;
        }

        nav ul li {
            float: left;
            list-style: none;
            margin: 0 10px;
        }

    </style>
</head>
<body>
<nav>
    <ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
        <li>dd</li>
        <li>ee</li>
    </ul>
</nav>
</body>
</html>

结果

相关推荐
码哥DFS6 分钟前
Flex布局原理
前端·css·css3
小样还想跑22 分钟前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者23 分钟前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者23 分钟前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端
Java水解31 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户3802258598241 小时前
vue3源码解析:响应式机制
前端·vue.js
bo521001 小时前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员1 小时前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
Web小助手1 小时前
js高级程序设计(日期)
javascript
Web小助手1 小时前
js高级程序设计(4/5章节)
javascript