Question

我很难将我创建的导航栏居中。

HTML代码：

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Mr. A</a></li>
<li><a href="#">Intro</a>
    <ul>
        <li><a href="#">Daily Agenda</a></li>
        <li><a href="#">Handouts</a></li>
        <li><a href="#">Student Work</a></li>
    </ul>
</li>
<li><a href="#">Digital Design</a>
    <ul>
        <li><a href="#">Daily Agenda</a></li>
        <li><a href="#">Handouts</a></li>
        <li><a href="#">Student Work</a></li>
    </ul>
</li>
<li><a href="#">Web Design</a>
    <ul>
        <li><a href="#">Daily Agenda</a></li>
        <li><a href="#">Handouts</a></li>
        <li><a href="#">Student Work</a></li>
    </ul>
</li>
<li><a href="#">AP Computer Science</a>
    <ul>
        <li><a href="#">Daily Agenda</a></li>
        <li><a href="#">Handouts</a></li>
    </ul>
</li>
<li><a href="#">FBLA</a>
    <ul>
        <li><a href="#">Membership</a></li>
        <li><a href="#">Competitions</a></li>
        <li><a href="#">Conferences</a></li>

    </ul>
</li>
</ul>
</div> 


</body>

CSS代码：

html {
    background-color:#2f2f4f;
}
div {
    position:relative;
}

.menu {
    position:absolute;
}

.menu ul {
    padding:0;
    margin:0;
    line-height:30px;
}

.menu li {
    position:relative;
    float:left;
    list-style:none;
    border-bottom-style:solid;
    border-top-style:solid;
    border-color:#c5b358;
    border-width:1px;
}

.menu ul ul {
    position:absolute;
    visibility:hidden;
    padding:0;
    margin:0;
}

.menu ul li a {
    text-align:center;
    font:"Georgia", serif;
    font-size:18px;
    color:#c5b358;
    width:250px;
    height:50px;
    display:table-cell;
    text-decoration:none;
    vertical-align:middle;
}

.menu ul li:hover {
    background-color:#2f4f2f;
    text-decoration:none;
}

.menu ul li:hover ul {
    visibility:visible;
    z-index:1;
}

.menu ul li:hover ul li a {
    background:#2f4f2f;
    z-index:1;
    border-bottom:none;
    opacity:0.9;
    text-decoration:none;
}

.menu ul li ul li:hover {
    background:#2f4f2f;
    opacity:0.8;
    text-decoration:underline;
}

我所做的一切似乎都无法奏效。我尝试了几种不同的选择，无法找到解决方案。我对网页设计还比较陌生，我花了一些时间来达到这一点。

Answer 1

我希望我能正确理解你的问题。在此基础上，我修改了你的css代码以获得所需的结果。请检查小提琴：https://jsfiddle.net/nileshmahaja/0k76hxc1/

修改后的CSS

.menu ul {
    text-align:center;  /* Added */
}

.menu li {
    /*float:left;   Removed */
    display:inline-block; /* Added */
}

中心对齐导航栏

1 个答案: