Question

我找到了一个简单的水平css菜单，但我很容易操作。

当前css的写入方式，菜单左对齐。我希望ul在div中居中，同时保持li的左对齐。我花了好几个小时试图解决这个问题，我在这个网站上查看了类似的帖子。我希望有一个简单的解决方案。谢谢你的帮助。

这是我的HTML：

<div id="horizontal_menu">
    <ul class="drop_menu">
    <li><a href="#" title="home" class="">Home</a></li>
    <li><a href="#" title="surnames" class="">Surnames</a></li>
    <li><a href="#" title="vital records" class="">Vital Records</a>
        <ul>
            <li><a href="#" title="Birth" class="">Birth</a></li>
            <li><a href="#" title="Marriage" class="">Marriage</a></li>
            <li><a href="#" title="Divorce" class="">Divorce</a></li>
            <li><a href="#" title="Death" class="">Death</a></li>
            <li><a href="#" title="Obiturary" class="">Obiturary</a></li>
            <li><a href="#" title="Land" class="">Land</a></li>
            <li><a href="#" title="Church" class="">Church</a></li>
            <li><a href="#" title="Military" class="">Military</a></li>
            <li><a href="#" title="Adoptions" class="">Adoptions</a></li>
            <li><a href="#" title="Education" class="">Education</a></li>
            <li><a href="#" title="Medical" class="">Medical</a></li>
            <li><a href="#" title="Newspapers" class="" >Newspapers</a></li>
        </ul></li>
    <li><a href="#" title="Photo Album" class="">Album</a></li>
    <li><a href="#" title="Relatives" class="">Relatives</a>
        <ul>
            <li><a href="#" title="Ancestors" >Ancestors</a></li>
            <li><a href="#" title="Descendants" >Descendants</a></li>
            <li><a href="#" title="Memorial" >Memorial</a></li>
        </ul></li>
    <li><a href="#" title="Sources" class="">Sources</a></li>
    <li><a href="#" title="Timeline" class="">Timeline</a></li>
    <li><a href="#" title="Index" class="">Index</a></li>

    </ul>

 </div>

这是我的CSS版本：

#horizontal_menu{
    width: 100%;
    height: 30px;
    background-color: #E0162B;
    }
.drop_menu {
    width:1024px;
    background:#E0162B;
    padding:0;
    margin: 0 auto;

    list-style-type:none;
    height:30px;
}

.drop_menu ul{
  margin: 0 auto 0 auto;
  padding: 0;
    }
.drop_menu li { 
    float:left;
    margin: 0 auto 0 auto;      
}
.drop_menu li a {
    padding:6px 20px;
    display: inline-block;
    color:#fff;
    text-decoration:none;
    font:14px 'Marcellus SC', serif;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#0052A5; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:##0052A5;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display: inline-block;
    width:168px;
    text-indent:15px;
    background-color:#0052A5;
}
.drop_menu li:hover ul li a:hover { background:#E0162B; }

Answer 1

对CSS进行一些简单的调整就可以实现：

.drop_menu {
    background:#005555;
    padding:0;
    margin:0;
    list-style-type:none;
    height:30px;
    text-align: center;
}
.drop_menu > li { display: inline-block; }
.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#fff;
    text-decoration:none;
    font:12px arial, verdana, sans-serif;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
    text-align: left;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}

Answer 2

您可以使用它来左对齐li s

.drop_menu li a {
    padding: 6px 20px 6px 6px;
}

这是一种黑客攻击但完美无缺。尝试将ul居中到#horizontal_menu div

.drop_menu{
    width: 100%;
    float: left;
    clear: left;
    left: 50%;
    position: relative;
}

修改：我看到你的结构比我想象的要复杂一点检查this fiddle。它工作得很好。你可以使用这个CSS。

Answer 3

text-align: center;

以下是代码：http://codepen.io/anon/pen/zomcn

我建议您清理CSS并使用class并不错，这样您就可以轻松地在样式表中定位正确的元素。我删除了一些代码，因为它与你想要完成的任务无关。

使用子菜单对中水平菜单

3 个答案: