html - CSHTML - 如何使无序列表元素水平？

Question

我正在为工作更新 Intranet 站点，需要知道如何水平对齐列表项。我知道这是通过 CSS 完成的，但我在弄清楚使它保持水平的错误所在时遇到了一些问题。

_SiteLayout.cshtml

<ul id="menu">
    <li> <a href="~/">Home</a> </li>
    <li><a href="~/About">About</a></li>
    <li class="sub_menu">
        <a href="~/Departments">Departments</a>
        <ul>
            <li> <a href="#">Equipment Design</a></li>
            <li> <a href="#">Operations</a></li>
            <li> <a href="#">Works</a></li>
            <li> <a href="#">Ecors</a></li>
        </ul>
        </li>
    <li class="sub_menu">
        <a href="~/Company">Company</a>
        <ul>
            <li> <a href="#">Environment</a></li>
            <li> <a href="#">Health & Safety</a></li>
            <li> <a href="#">Human Resources</a></li>
            <li> <a href="#">Quality Assurance</a></li>
            <li> <a href="#">Timesheet</a></li>
            <li> <a href="#">HS Helpdesk</a></li>
        </ul>
    </li>
    <li class="sub_menu">
        <a href="~/Resources">Resources</a>
        <ul id="sub_menu">
            <li> <a href="#">Telephone Directory</a></li>
            <li> <a href="#">Webmail</a></li>
        </ul>
    </li> 
    <li><a href="~/Contact">Contact</a></li>
</ul>

site.css

#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0;
    padding: 0;
    float: left;
    display: inline-block;
    list-style-type: none;
}
#menu > li {
    float: left;  /**/
    display: inline;
    list-style: none;
    padding-left: 15px;
    clear: both; /**/
    height: 2em; /**/
    list-style-type: none;
    display: inline;
}
#menu > li > a {
    float: left;
    display: inline-block;
    background: none;
    color: #999;
    text-decoration: none;
    line-height: 3;  /**/
    text-transform: uppercase;  /**/
}
ul#menu > li > a:hover {
    color: #333;
    text-decoration: none;
}

/*Contextual Positional*/
ul#menu > li.sub_menu {
    position: relative;
}

/*Sub-Menu Styling*/
ul#menu > li.sub_menu ul {
    width: 10em;
    margin: 0;
    padding: 0.5em 0;
    list-style: none;
    position: absolute;
    top: -1000em;
}
ul#menu > li.sub_menu ul li {
    width: 90%;
    margin: 0 auto 0.3em auto;
}
ul#menu > li.sub_menu ul li a {
    height: 100%;
    display: block;
    padding: 0.4em;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
ul#menu > li.sub_menu ul li a:hover {
    background: #c60;
    text-decoration: underline;
}

/*Showing the Sub-Menu*/
ul#menu > li.sub_menu:hover ul {
    top: 3em;
}

Answer 1

从 #menu > li 中删除 clear:both，这目前有效地覆盖了您应用的 float:left，从而重新启动每个新行上的元素。

Demo Fiddle