Question

努力使浏览器中间的导航栏居中...尝试了一些通过谷歌找到的东西，但还没有运气。看起来这应该是一件容易的事，但事实证明这是一个痛苦的问题！

继承代码。

<div id="nav">
            <ul>
                <li class="home"><a href="index.php">Home</a></li>
                <li class="detail"><a href="about.php">About</a></li>
                <li class="work"><a href="work.php">Work</a></li>
                <li class="contact"><a href="contact.php">Contact</a></li>
            </ul>
        </div>

#nav {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    border-bottom: 1px solid #ccc;  }
#nav ul {
    display: inline-block;
    list-style-type: none;
}
#nav li {
    float: left; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }
#nav li:first-child a {
    border-left: 1px solid #ccc; }
#nav li a:hover {

color: #50B748;

}

Answer 1

请尝试不使用浮点数，而是使用display:inline-block。

JSfiddle Demo

<强> CSS

ul {
    padding: 0;
    margin: 0;
}

#nav {
    //width: 100%; /* not required */
    //float: left; /* not required */
    margin: 0 0 1em 0;
    padding: 0;    
    border-bottom: 1px solid #ccc;  }

#nav ul {
    width:100%;
    display: block;
    list-style-type: none;
    text-align: center; /* add this */
}
#nav li {
   //float: left;  /* remove */
    display: inline-block; /* add this */
}
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }

#nav li:first-child a {
    border-left: 1px solid #ccc; }

#nav li a:hover {    
    color: #50B748;
}

编辑 - 添加了ul填充/边距的重置

Answer 2

向其添加margin-top:50%;

就像这样：

#nav {


    width: 100%;
    float: left;
margin-top:50%;
    padding: 0;
    border-bottom: 1px solid #ccc;  }
#nav ul {
    display: inline-block;
    list-style-type: none;
}
#nav li {
    float: left; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }
#nav li:first-child a {
    border-left: 1px solid #ccc; }
#nav li a:hover {

color: #50B748;

}

这可以解决您的问题吗？或者我不明白你的问题？

Answer 3

只需在text-align: center;样式中添加#nav即可。并重置UL默认边距应该是这样的

<强> HTML

<div id="nav">
            <ul>
                <li class="home"><a href="index.php">Home</a></li>
                <li class="detail"><a href="about.php">About</a></li>
                <li class="work"><a href="work.php">Work</a></li>
                <li class="contact"><a href="contact.php">Contact</a></li>
            </ul>
        </div>

<强> CSS

#nav {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    border-bottom: 1px solid #ccc;  }
#nav ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
}
#nav li {
    float: left; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }
#nav li:first-child a {
    border-left: 1px solid #ccc; }
#nav li a:hover {

color: #50B748;

}

中心水平导航菜单

3 个答案: