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

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

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

## 简介 ##

**说明**

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

**核心方法**

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

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

## 示例 ##

<!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>

结果

![521c8dbba1ba4dc6bb1682351aeb8988.png][]

[CSS_--_ul_li_IT_-CSDN]: https://knife.blog.csdn.net/article/details/128488994
[521c8dbba1ba4dc6bb1682351aeb8988.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/aaac2c133ec246f9bde57122b330cbb5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，97人围观）

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

相关阅读

相关 CSS之布局系列--顶部导航栏二级菜单居中展示

原文网址：[CSS之布局系列--顶部导航栏二级菜单居中展示\_IT利刃出鞘的博客-CSDN博客][CSS_--_IT_-CSDN] 简介本文介绍CSS将顶部导航栏居中

红太狼/ 2024年03月30日 13:25/ 0 赞/ 84 阅读

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

原文网址：[CSS之排列系列--顶部导航栏ul、li居中展示的方法\_IT利刃出鞘的博客-CSDN博客][CSS_--_ul_li_IT_-CSDN] 简介说明本

红太狼/ 2024年03月30日 03:29/ 0 赞/ 98 阅读

相关 CSS之排列系列--垂直居中--方法/实例

原文网址：[CSS之排列系列--垂直居中--方法/实例\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_IT_-CSDN] 简介说明本文用示例介绍CSS

灰太狼/ 2023年10月01日 08:32/ 0 赞/ 7 阅读

相关 CSS之排列系列--水平居中--方法/实例

原文网址：[CSS之排列系列--水平居中--方法/实例\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_IT_-CSDN] 简介本文介绍CSS中把元素水平居

深藏阁楼爱情的钟/ 2023年10月01日 08:31/ 0 赞/ 9 阅读

相关【CSS】导航栏中的文字居中

设置导航栏时，比如下面的图片 ![c9f46dab23bd4f088b02b9228522292a.png][] 在一个导航栏中，如果可以把文字居中显示，那肯定比原来的好看

谁借莪１个温暖的怀抱￠/ 2023年09月25日 20:25/ 0 赞/ 66 阅读

相关 css导航栏_使用CSS的导航栏

css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing

系统管理员/ 2023年03月05日 10:59/ 0 赞/ 30 阅读

相关使用 HTML/CSS 实现 Educoder 顶部导航栏

使用 HTML/CSS 实现 Educoder 顶部导航栏任务描述相关知识使用flex布局justify-content: space-be

Love The Way You Lie/ 2022年11月15日 11:49/ 0 赞/ 262 阅读

相关怎么导航栏背景居中html,iOS - 设置导航栏之标题栏居中、标题栏的背景颜色

本章实现效果: ![04b7f078c6b8][] Untitled.gif 前言: 项目中很多需求是要求自定义标题栏居中的,本人最近就遇到这中需求,如果用系统自带的t

朱雀/ 2022年10月06日 11:59/ 0 赞/ 279 阅读

相关 CSS+HTML 顶部导航栏实现

导航栏的实现、固定顶部导航栏、二级菜单实现效果图： ![在这里插入图片描述][70] -------------------- 2018/11/16更新：最

川长思鸟来/ 2021年09月16日 10:08/ 0 赞/ 533 阅读

相关 rn 顶部导航栏

(1)安装 yarn add @react-navigation/native yarn add react-native-gesture-hand

逃离我推掉我的手/ 2021年07月24日 12:45/ 0 赞/ 769 阅读