我怎样才能使 <li> 跨越 <ul> 的全宽？答案

【问题标题】：How can i make <li> span full width across <ul>?我怎样才能使 <li> 跨越 <ul> 的全宽？
【发布时间】：2015-02-25 04:24:32
【问题描述】：

我正在使用我想要制作的 ul 和 li 创建一个垂直导航菜单

跨越 ul 的整个宽度，因此我可以为每个菜单项添加下划线（例如此站点 (http://www.steffenallen.com/index.php)）

然而，li 中有一个空格阻止它跨越父 ul。有人能告诉我上面的网站是怎么做到的吗？或者，我需要做什么？

<nav>
<ul class='menu'>
    <li class="menuItem">
        <a href="about.html"> About </a>                    
    </li>

    <li class="menuItem"> <a href="#"> Album     </a> 
        <ul class="submenu">
            <li class="submenu-Item"><a href="nepal.html">Nepal </a></li>
            <li class="submenu-Item"><a href="seattle.html">Seattle</a></li>
            <li class="submenu-Item"><a href="SouthKorea.html">South Korea</a></li>

        </ul>


    </li>
    <li class="menuItem"> <a href="#"> Contact </a> </li>
    <!-- <li>   </li> -->

</ul>

我的 CSS 是

    ul,li{
    list-style: none;
    display: block;
}

ul.menu{
    width: 170px;
    /*position: absolute;*/
    /*width: 100%;*/
    /*margin-left: -20px;*/
    border: 1px solid orange;
}


ul.submenu{
    /*position: absolute;*/
    /*left: -999px;*/
    /*visibility: hidden;*/
    display: none;
}

li{
    width:140px;
    margin: 0;
    padding: 0;
    /*width:100%;*/
    border-left: 1px blue solid;
    border-right: 1px blue solid;
}

span{
    display: block;
}

li a, li span {
    /*width: 170px;*/
    /*width: 100%;*/
    border-bottom: #cbcbcb 1px solid;
}


li.menuItem, li.submenu-Item{
        text-align: right;
        margin: 1em 0em 1em 0em;
}
li.menuitem > a{
    color: #808080;
}

li a:hover{
    color: steelblue;
}

li.menuItem a.current{
    background-color: orange;
}

ul.menu:first-child{
    margin-top: 0

}

【问题讨论】：

标签： html css html-lists nav

【解决方案1】：

首先，您的CSS 写得不好，因此有点难以理解。

代码中的主要问题恰好是正在应用的默认CSS。您可以按如下方式删除它：

ul, li {
   margin: 0; 
   padding: 0;
}

但是，我建议您将CSS 代码简化如下。这仍然可以实现您一直在寻找的东西，同时使您的代码更加优雅和易于阅读。请看下面的代码：

ul, li {
    margin:0px;
    padding:0px;
}
ul.menu {
    border: 1px solid Orange;
    width:200px;
}

ul.menu li {
    display:block;
    list-style-type:none;

}
ul.menu li a {
    border-bottom:1px solid #ccc;
    display:block;
    text-align:right;
    text-decoration: none;
}
ul.menu li ul {
    display:none;
}
ul.menu li:hover > ul {
    display:block;
}

ul.menu li ul li:last-child {
    border-bottom:none;
}

请看下面的工作：

ul, li {
    margin:0px;
    padding:0px;
}
ul.menu {
    border: 1px solid Orange;
    width:200px;
}

ul.menu li {
    display:block;
    list-style-type:none;
    
}
ul.menu li a {
    border-bottom:1px solid #ccc;
    display:block;
    text-align:right;
    text-decoration: none;
}
ul.menu li ul {
    display:none;
}
ul.menu li:hover > ul {
    display:block;
}

ul.menu li ul li:last-child {
    border-bottom:none;
}

<nav>
    <ul class='menu'>
        <li class="menuItem"> <a href="about.html"> About </a> 
        </li>
        <li class="menuItem"> <a href="#"> Album     </a> 
            <ul class="submenu">
                <li class="submenu-Item"><a href="nepal.html">Nepal </a>

                </li>
                <li class="submenu-Item"><a href="seattle.html">Seattle</a>

                </li>
                <li class="submenu-Item"><a href="SouthKorea.html">South Korea</a>

                </li>
            </ul>
        </li>
        <li class="menuItem"> <a href="#"> Contact </a> 
        </li>
        <!-- <li>   </li> -->
    </ul>

希望对你有帮助！！！

【讨论】：

【解决方案2】：

在左侧有ULs 的默认边距/填充，所以只需将其删除。它是 40 像素，取决于浏览器是否使用边距或内边距。

ul, li {margin-left: 0; padding-left: 0;}

右边的空间是你的宽度造成的，列表有170px，项目只有140px。

http://jsfiddle.net/8q9chvbh/

【讨论】：