我該如何居中菜單？ CSS

Question

如何居中菜單？還有，當鼠標進入菜單按鈕時，我想要改變顏色？謝謝你的幫助。

div.menu { 
    list-style:none; 
    margin:20px; 
    padding:0; 
    width:100% } 
div.menu ul{ 
    font-family: Verdana; 
    font-size:14px; 
    margin:0 auto; 
    padding:0;} 
    div.menu li{ 
    display:inline; } 
div.menu li a{ 
    text-decoration:none; 
    padding:5px 0; 
    width:100px; 
    background:#FBB117; 
    color:#4C4646; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff; } 

div.menu lia:hover{ 
    background:#a2b3a1; 
    color:#000 } 

我工作正常，但我改變了一些東西，它不在中心了。有點左側。我找不到有什麼問題。能否請你幫忙？

div.menu { 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:100%; 
    text-align:center;} 
div.menu ul{ 
    font-family: Verdana; 
    font-size:14px; 
    margin:20px; 
    padding:0; 
    display:inline-block;} 
div.menu li{ 
    display:inline;} 
div.menu li a{ 
    text-decoration:none; 
    padding:5px 0; 
    width:100px; 
    background:#FBB117; 
    color:#4C4646; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff; } 
div.menu li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 

Answer 1

使用自動頁邊距浮動菜單。

使用onmouseover事件更改按鈕上的顏色。

Answer 2

將任何div都居中放置在絕對位置和相對位置，或者在px，em或inch中指定寬度，之後使用另一個div並使用％。你可以說得更詳細點嗎？？？

Answer 3

像this sample fiddle一樣。

1. 中心與text-align:center的DIV，並display:inline-block名單上的菜單，從DIV到列表中移動20像素的保證金。
2. 要更改懸停時的顏色，請在li和a之間添加一個空格。

Answer 4

看看這些文章。他們所需要的一切：

• http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

OR

• http://matthewjamestaylor.com/blog/centered-dropdown-menus

Answer 5

我有一些CSS我一年拼湊多前，我打電話在我工作的幾乎每個項目上都可以發揮作用......隨時可以使用它。要使用它，你需要做的是風格類似這樣的列表：

<ul id="mylist" class="linearlist center"><li>Link or something</li></ul> 

這將讓你真正居中對齊很容易你的菜單，而無需使用浮標和具有摺疊容器的問題來處理。樣式類有幾個選項 - 中心，左側，右側，分隔符，內部函數，外部函數。玩一玩。只要確保（a）你給它一個類「線性列表」，並確保在HTML中沒有空格是一些瀏覽器渲染的。

/************************************* 
FLAT LIST LAYOUT 

    This can be called into use using the following classes: 

      required  : linearlist 
      select either : centre/left/right 
      optional  : separators 
      outers/inners : adds or removes outermost borders 

    Example usage: 

      eg 1: <ul class="linearlist right separators"> 
      eg 2: <ul class="linearlist centre separators"> 
      eg 3: <ul class="linearlist left"> 

    Support: 
      IE6 : :first-child and :last-child pseudoclasses are not supported 
        .inners and .outers will not work 
      IE7 : :last-child pseudoclass is not supported 
        .outers will not work but .inners will 
      Note browser-sniffing is required to make list items full height in IE6 and IE7 

    Remember - you will need to remove whitespace between list items for true rendering. 

*************************************/ 
ul.linearlist, .linearlist ul   {list-style-type: none; padding: 0; margin: 0;} 
ul.linearlist li,.linearlist ul li  {display: inline-block; padding: 0; margin: 0;} 
*ul.linearlist li,*.linearlist ul li {display: inline !important;} 
ul.linearlist li a,.linearlist ul li a {display: inline-block;} 

ul.separators li,.separators ul li       {border-left-width: 1px; border-left-style: solid;} 
ul.inners li:first-child,.inners ul li:first-child {border-left-width: 0;} /* removes border from left-most list item */ 
ul.outers,.outers ul {border-right-width: 1px; border-right-style: solid;} /* adds border to right-most list item */ 

ul.centre,ul.center,.centre ul,.center ul {text-align: center;} 
ul.left,.left ul       {text-align: left;} 
ul.right,.right ul      {text-align: right;} 

哦，是的，和你有你的CSS，這將防止在鼠標懸停顏色變化一點點錯字......你最後的聲明應該是

div.menu li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 

但是你可以簡化IT有一點是因爲嵌套如此多的選擇器是一個糟糕的做法......試試這個來代替：

.menu a:hover{ 
    background:#a2b3a1; 
    color:#000 } 

Answer 6

退房這個JS小提琴

http://jsfiddle.net/7zk8E/

您居中菜單，通過應用文本對齊：中心到外層div（你叫同級車菜單）。我還將.menu ul display屬性更改爲內聯塊，因爲內聯元素不會獲得任何填充或邊距。

您懸停不工作的原因是因爲你的CSS有div.menu lia:hover

一個錯字，應該div.menu li a:hover

Answer 7

嘗試此三通（33.3％寬度）：Example

.menu { 
    list-style:none; 
    margin:0 auto; 
    padding:0; 
    width:100%; 
} 

.menu ul { 
    font-family:Verdana; 
    font-size:14px; 
    padding:0; 
    width:100%; 
} 

.menu li { 
    float:left; 
    width:33.3%; 
} 

.menu a { 
    text-decoration:none; 
    background:#FBB117; 
    color:#4C4646; 
    float:left; 
    width:100%; 
    height:100%; 
    text-align:center; 
    border-left:1px solid #fff; 
} 

.menu a:hover { 
    background:#a2b3a1; 
    color:#000; 
} 

• 在任何這些樣式之前，您不需要使用'div'選擇器，因此我將它們取出。
• div.menu LIA：懸停有一個錯字，應該是已經李一：懸停{}