CSS UL/LI菜單不居中

我的CSS UL菜單似乎不想居中，有什麼想法？我粘貼了以下代碼以供審閱，我對CSS非常陌生，因此非常感謝您的幫助:-)CSS UL/LI菜單不居中

我能夠居中的唯一方法是修復寬度並使用html中心標記但我需要100％的擴展菜單，我需要自動居中。

的CSS

#menu{ 
    width:100%; 
    margin: 0; 
    padding: 5px 0 0 0; 
    list-style: none; 
    background-color:#333333; 
    text-align:center; 
} 

#menu li{ 
    float: left; 
    padding: 0 0 5px 0; 
    position: relative; 
    list-style:none; 
    margin:auto; 
} 

#menu ul{ 
     list-style:none; 
     display:inline; 
     margin: 0; 
     padding: 0; 
     text-align: center; 
} 

#menu a{ 
    float: left; 
    height: 15px; 
    padding: 0 25px; 
    color:#FFF; 
    text-transform: uppercase; 
    font: 10px/25px Arial, Helvetica; 
    text-decoration: none; 
    text-shadow: 0 0px 0 #000; 
} 


#menu li:hover > a{ 
    color:#F90; 

    font: bold 10px/25px Arial, Helvetica; 
} 

*html #menu li a:hover{ /* IE6 */ 
    color: #F06; 
} 

#menu li:hover > ul{ 
    display: block; 
}

再次感謝:-)

來源

2012-10-29 AppleTattooGuy

你想讓菜單塊位於菜單中心還是鏈接內？ – Chris

@Chris我想讓菜單中的鏈接居中。 – AppleTattooGuy

提供寬度您menu和使用margin: auto;

#menu{ 
    width:300px; <--------Here 
    margin: 0 auto; <-----Here 
    padding: 5px 0 0 0; 
    list-style: none; 
    background-color:#333333; 
    text-align:center; 
}

而且你爲什麼要這麼做？

#menu li:hover > ul{ 
    display: block; 
}

而且也是這個

#menu a{ 
    float: left; 
    .... 
}

更新：剛剛看了你所有的級聯小艾搞砸的樣式，請使用以下

#menu { /* I Assume this ID is applied to <ul> element */ 
    width:/*Whatever you want to define*/; 
    margin: 0 auto; <---Change Here 
    padding: 5px 0 0 0; 
    list-style-type: none; <---Change Here 
    background-color:#333333; 
    text-align:center; 
} 

#menu li{ 
    float: left; <---You don't need this 
    padding: 0 0 5px 0; 
    position: relative; <---You don't need this too 
    list-style:none; <---You don't need this too 
    margin:auto; <---You don't need this too 
} 

/* Take out this entirely from here */ 
#menu ul{ 
     list-style:none; 
     display:inline; 
     margin: 0; 
     padding: 0; 
     text-align: center; 
} 
/* till here */ 

#menu a{ 
    float: left; <---You don't need this 
    height: 15px; 
    padding: 0 25px; 
    color:#FFF; 
    text-transform: uppercase; 
    font: 10px/25px Arial, Helvetica; 
    text-decoration: none; 
    text-shadow: 0 0px 0 #000; 
} 


#menu li:hover > a{ 
    color:#F90; 

    font: bold 10px/25px Arial, Helvetica; 
} 

*html #menu li a:hover{ /* IE6 */ 
    color: #F06; 
} 

#menu li:hover > ul{ 
    display: block; 
}

如果你想在菜單裏面的鏈接太簡單了使用這個

HTML

<ul id="#menu"> 
    <li></li> 
</ul>

CSS

#menu li { 
    text-align: center; 
}

來源

2012-10-29 19:52:17

非常感謝您的幫助和時間，文本現在居中，但現在顯示爲垂直列表，任何想法？ – AppleTattooGuy

@JamesLeist你想要水平顯示它？ –

是的，它是一個菜單欄，我已經設法通過添加float：left到菜單li部分，但現在它不再居中。 – AppleTattooGuy

在UL把

text-align:center;

意味着在UL該文本的中心。您應該添加：

margin-left:auto; 
margin-right:auto;

到ul。這將適用於所有主流瀏覽器保存IE瀏覽器。要在IE中工作，您需要確保包含ul的標籤具有

text-align:center;

其中。

來源

2012-10-29 19:54:02 avikar96

CSS UL/LI菜單不居中

回答

相關問題