css与居中水平无序列表的问题

我在使用我的导航无序列表时遇到问题。我看了其他的建议，并试图解决它，所以现在我的代码是一个热门的混乱。我无法弄清楚我的生活出了什么问题。我尝试过的所有解决方案仍然不会将窗口居中放在窗口中。增加溢出：可见拉伸它，但不是100％，并且它在窗口增长时不扩展。css与居中水平无序列表的问题

#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;

}

来源

2013-04-05 Kay

发表您的HTML结构 – 2013-04-05 13:32:57

请发表您的HTML – Lowkase 2013-04-05 13:33:00

这是你在找什么？

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-05 13:44:40

当然，只是删除边框。我把它放在那里，所以你可以看到元素在哪里。 – 2013-04-05 13:45:12

是的！非常感谢！我知道这是因为我有太多无用的代码，但我一直没有删除正确的东西。 – Kay 2013-04-05 14:09:47

请选择我的答案，以便我可以得到一些观点:) – 2013-04-05 14:33:04

如果你添加到您的代码：

你可以尝试

text-align: center

来源

2013-04-05 13:39:06 Heckscheibe

的一件事是把列表中的DIV中和将样式text-align:center;添加到div。

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

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

希望这有助于:)

来源

2013-04-05 13:40:22

尝试：

#navbar ul { 
text-align: center; 
}

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

来源

2013-04-05 13:40:47 Michael

假设你的导航栏有一些设置宽度您可以在ul

jsFiddle

使用 text-align:center

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

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

来源

2013-04-05 13:41:42

css与居中水平无序列表的问题

回答

相关问题