Question

<div id="header">
        <div id="logo">
            <h1><a href="http://lookaroundyou.net">Look Around You</a></h1>
        </div>
        <div id="horNav">
            <ul class="horNav">
                <li class="horNav"><a href="#">HOME</a></li>
                <li class="horNav"><a href="#">SUBMIT-CONTACT</a></li>
            </ul>
            <ul class="horNav-last">
                <li class="horNav"><a href="#">TAGS</a></li>
            </ul>
            <ul class="advertisment">
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">ADVERTISEMENT</a></li>
            </ul>
        </div>
    </div>

css是：

#wrapper{
    width:80%;
    margin:0 auto;
    min-width:920px;
}
#header, #logo{
    width: 100%;
    float:left;
}

#horNav{
    background:black;
    width: 80%;
    color:white;
    margin: 0 auto;
}

#horNav a{
    background: black;
}
.horNav li{
    float:left;
    border-right:1px solid #828282;
}

.horNav-last li{
    float:left;
}

.advertisment li{
    float:right;
    border-left:1px solid #828282;
}

#horNav a{
    display:block;
    padding:5px 10px;
    color:white;
    font-size: 13px;
}

#horNav a:hover{
    background:#828282;
}

发生的事情是，无序列表在不同的角落都是黑色的，而#horNav的中间是白色的，因为你可以看到HERE，但当然它需要全黑。如何解决这个问题？

Answer 1

#horNav {
    overflow: hidden;
    display: block;
    width: 100%;
}

#horNav可以是您想要的任何宽度，例如80%就像现在一样，如果你希望它居中，你可以重新引入margin: 0 auto;。

水平菜单着色出错

1 个答案: