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與居中水平無序列表的問題

回答

相關問題