码迷,mamicode.com
首页 > Web开发 > 详细

简单两步使用css控制div下导航栏ul居中显示

时间:2020-06-22 12:38:30      阅读:51      评论:0      收藏:0      [点我收藏+]

标签:div   属性   下划线   划线   back   type   png   ext   ola   

第一步:父层设置文本居中属性

ul{
    text-align:center;
}

第二步:li设置内联样式

li{
    display:inline;
}

PS

只需以上两步就可以实现导航栏居中显示了,但为了美观好看,可以稍微加点料。以下供参考
技术图片

<style type="text/css">
    body{
        background:#232e3c;
        padding:16px;
    }
    #nav ul{
        text-align:center;
        list-style:none;
    }
    #nav li{
        display:inline;
        margin-left:16px;
        background:#fff;
        border-radius:25px;
        padding:10px;
    }
    #nav a{			
        color:#000;
        text-decoration:none;
        font-size:18px;
        font-weight:bold;
        font-family:consolas;
    }
    #nav li:hover{
        background:#7bc3d6;
    }
</style>
  • list-style:none; 取消列表前面的列表样式
  • border-radius:25px; 设置圆角背景样式
  • text-decoration:none; 取消链接下划线
  • li:hover 设置一下鼠标移上去时的背景变色

简单两步使用css控制div下导航栏ul居中显示

标签:div   属性   下划线   划线   back   type   png   ext   ola   

原文地址:https://www.cnblogs.com/ymtianyu/p/13176118.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!