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

红太狼 2024-03-30 03:29 38阅读 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 条评论，38人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 android 顶部导航栏自定义,Android自定义顶部导航栏控件

class HeaderBar @JvmOverloads constructor( context: Context, attrs: AttributeSet? = nul

朱雀/ 2022年10月16日 00:58/ 0 赞/ 291 阅读

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

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

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

相关自定义顶部导航栏

创建自定义属性在res/values中创建名为attrs的文件。定义2个属性，分别是左边按钮和右边按钮，值是drawable，所以格式应该为refrence。

淩亂°似流年/ 2022年07月13日 23:42/ 0 赞/ 288 阅读

相关如何用CSS构建响应式顶部导航栏

如何用CSS构建响应式顶部导航栏想建个漂亮的导航栏，查了一下，那些用工具导来导去的都比较占流量，决定只用CSS构建，发现runoob上有三个完整的实例，我整理了一下，写

骑猪看日落/ 2022年06月05日 11:26/ 0 赞/ 283 阅读

相关 CSS固定定位生成网页顶部导航栏实例

固定定位 position:fixed 固定定位是相对与浏览器窗口来定位, 就算页面滚动, 固定定位元素的位置不会变固定定位元素脱离了标准文档流, 会雅盖主标准文档流

迈不过友情╰/ 2021年10月19日 10:12/ 0 赞/ 379 阅读

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

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

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

相关 rn 顶部导航栏

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

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