1

我无法将用于导航的无序列表居中。我查看了其他建议并尝试修复它，所以现在我的代码一团糟。我一生都无法弄清楚出了什么问题。我尝试过的所有解决方案仍然没有在窗口中将列表居中。添加溢出：可见将其拉伸但不是 100%，并且当窗口增大时它不会扩展。

#navbar {
position: fixed;
top:-17px;
margin-bottom: 10px;
font-family:Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;

}

#navbar ul > li {
display: inline-block; 
float: none;
color:white;
font-size: 14px;
margin-right: 35px;
margin-left: 35px;
padding: .2em 1em;
overflow:visible;

}

4

5 回答 5

2

这是你想要的？

http://jsfiddle.net/talymo/6FGbw/

#navbar {
    position:fixed;
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
    text-align:center;
}

    #navbar li{
        padding:10px;
        display:inline-block;
    }

    <ul id="navbar">
        <li>Thing 1</li>
        <li>Thing 2</li>
        <li>Thing 3</li>
    </ul>
于 2013-04-05T13:44:40.717 回答
1

如果将其添加到代码中会怎样：

text-align: center
于 2013-04-05T13:39:06.153 回答
1

您可以尝试的一件事是将列表放入 div 并将样式添加text-align:center;到 div。

之后只需position:fixed;从#navbar.

或者您可以将列表包装在<center> </center>标签中。

希望这可以帮助 ：）

于 2013-04-05T13:40:22.733 回答
1

尝试：

#navbar ul {
text-align: center;
}

JSFiddle：http: //jsfiddle.net/zgwxP/

于 2013-04-05T13:40:47.983 回答
1

假设您的导航栏有一些设置宽度，您可以text-align:center在您的ul

jsFiddle

/* Give the navbar a width */
#navbar {
    left:0;
    right:0;
}

#navbar ul {
    padding:0;
    text-align:center;
}
于 2013-04-05T13:41:42.530 回答