html - 导航栏未正确排列

Question

所以我正在研究应该水平对齐的导航栏，但它不会。如果我尝试使用

display: inline-block;

然后

float: left;

导航栏与我的其他部门发生冲突

这是我的代码: http://jsfiddle.net/0p287vmb/

Answer 1

试试这个:

nav
a {
    font-family: Impact;
    font-size: 15px;
    color: black;
    text-decoration: none;
    display: inline-block;
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0px;
    padding: 0px;
}

nav
a:hover {
    background-color: white;
    display: inline-block;
}

我删除了逗号，因为使用逗号可以将其转换为 nav & a。在你的情况下，删除它解决了问题，它也覆盖了导航的宽度，这就是为什么它似乎没有占据整个宽度。