Question

我希望列表元素并排。我不希望div的顶部和底部之间有任何空间。当我悬停链接时，我想要改变背景颜色，它必须是整个div的高度。对不起，我的英语不好。我正在使用LESS。这是我的代码：

HTML：

<div class="upper-links">
    <ul class="upper-nav">
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
</div>

CSS：

.upper-nav {
    list-style-type: none;
    background-color:#003264;
    height:auto;
    width:100%;
    position:fixed;
    top:0px;
    left:0px;
}
.upper-nav li {
    display:inline;
    list-style-type: none;
    background-color:#003264;
    padding:10px;
    vertical-align: center;
    float:left;
    height:50px;
    text-transform: uppercase;
    .selected {
        background-color:#fff;
    }
     a:link, a:visited {
        background-color:#003264;
        color:#fff;
        display: inline-block;
        height:100%;
        text-decoration: none;
    }
    a:hover, a:active {
        background-color:#fff !important;
        color:#003264;
        display: inline-block;
        height:100%;
        text-decoration: none;
    }
}

Answer 1

尝试在<a>元素上设置填充，从<li>元素中删除填充，并为box-sizing: border-box元素设置<a>以将其填充包含在其定义的高度中

     .upper-nav{
        list-style-type: none;
        background-color: #003264;
        height: auto;
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
     }
     .upper-nav li{
        display: inline;
        list-style-type: none;
        background-color: #003264;
        vertical-align: middle;
        float: left;
        height: 50px;
        text-transform: uppercase;
        .selected{
           background-color: #fff;
        }
        a:link, a:visited{
           background-color: #003264;
           color: #fff;
           display: inline-block;
           height: 100%;
           text-decoration: none;
           -moz-box-sizing: border-box;
           box-sizing: border-box;
           padding: 10px;
        }
        a:hover, a:active{
           background-color: #fff !important;
           color: #003264;
           display: inline-block;
           height: 100%;
           text-decoration: none;
           -moz-box-sizing: border-box;
           box-sizing: border-box;
           padding: 10px;
        }
    }

水平菜单：如何并排获取li项（没有空格）？

1 个答案: