【问题标题】:How to centre a nav bar in CSS [duplicate]如何在 CSS 中居中导航栏 [重复]
【发布时间】:2016-01-11 19:20:58
【问题描述】:

我想在我的网页顶部有一个导航栏以居中。我一直在寻找几个小时,但无法让它工作。

这是我想要居中的 HTML。

<div id="nav">
<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>        
    <li><a href="#">My CV profile</a></li>
</ul>

这是我在网上找到的一些 CSS 并不能完全正常工作。

#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;  }

#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0; }

#nav li {
float: left; }

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: 'calibri light', arial;
color: #069; }

我是一个相当无能的开发人员,但我是否遗漏了一些明显的东西?

【问题讨论】:

    标签: html css html-lists nav


    【解决方案1】:

    在这里可以工作。只需根据您的要求更改 margin-left 属性

    #nav {
    width: 100%;
    float: left;
    margin-left:300px;
    padding: 0;  }
    
    #nav ul {
    list-style: none;
    width: 800px;
    margin: 0 auto;
    padding: 0; }
    
    #nav li {
    float: left; }
    
    #nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-family: 'calibri light', arial;
    color: #069; }
    <div id="nav">
    <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>        
        <li><a href="#">My CV profile</a></li>
    </ul>

    【讨论】:

    • 哇,非常感谢,让我开心。
    【解决方案2】:

    您可以将 text-align center 设置为父级并在子级中显示:inline-block 以居中。示例:

    #nav {
    background: #fff;
    width: 100%;
    text-align: center;
    width: 100%;
    padding: 0;  
    }
    
    #nav ul {
    list-style: none;
    margin: 0 auto;
    padding: 0; }
    
    #nav li {
    display: inline-block;
    }
    
    #nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-family: 'calibri light', arial;
    color: #069; }
    <div id="nav">
    <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>        
        <li><a href="#">My CV profile</a></li>
    </ul>

    【讨论】:

    • 非常好用,完美运行
    猜你喜欢
    • 2021-05-22
    • 2019-03-03
    • 2014-05-18
    • 2012-11-14
    • 2023-03-27
    • 2017-04-23
    • 2014-05-03
    • 2017-08-20
    • 2019-05-25
    相关资源
    最近更新 更多