Question

我无法将我用于导航的无序列表居中。我已经查看了其他建议，并尝试修复它，所以现在我的代码是一个热点。我无法弄清楚我的生活会出现什么问题。我尝试过的所有解决方案仍然没有将列表放在窗口中心。添加溢出：可见伸展但不是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;

}

Answer 1

这是你在找什么？

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>

Answer 2

如果将其添加到代码中该怎么办：

text-align: center

Answer 3

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

之后只需从position:fixed;删除#navbar样式。

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

希望这会有所帮助：）

Answer 4

尝试：

#navbar ul {
text-align: center;
}

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

Answer 5

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

jsFiddle

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

#navbar ul {
    padding:0;
    text-align:center;
}

以集中水平无序列表为中心的麻烦

5 个答案: