Question

您好我在CSS和HTML中创建了一个简单的导航栏。我需要它是完全水平的唯一的问题是如果你放大它开始四处走动。请参阅下面的示例。只是想知道如何制止这一点。另外我如何将文本放在框的中间？因为你可以看到它位于靠近顶部的中间位置。谢谢你的帮助

的CSS：

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li {
    float:left;
}
a:link, a:visited {
    display:block;
    width:155px;
    height: 60px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover, a:active {
    background-color:#7A991A;
}

感谢您的帮助

Answer 1

如果您不希望它被包裹，您需要设置<ul>的宽度。

ul
{
    width:820px;
}

要使文字居中，请将line-height设置为与height

相同

a:link,a:visited
{
    line-height: 60px;
}

jsFiddle

Answer 2

或设置宽度为的容器。

.wrapper {
 width:800px   

}

http://jsfiddle.net/h4CHr/

防止包装菜单列表

2 个答案: