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

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

Demo Fiddle

Answer 2

将#menu > li更改为

#menu > li {
    display: inline-block;
    list-style: none;
    padding-left: 15px;
    clear: both; /**/
    height: 2em; /**/
    list-style-type: none;
}

似乎也有效。更改是删除第二个display并更改display: inline; display: inline-block;

CSHTML - 如何使无序列表项水平？

2 个答案:

Demo Fiddle