不能中心下拉菜單

我有一個下面的下拉菜單，但我有麻煩中心的菜單。我試圖把<center>標籤，並將ul設置爲margin auto 0，但它不起作用。有什麼遺漏嗎？不能中心下拉菜單

<style type="text/css"> 
ul { 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { 
    display: none; 
} 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #1e7c9a; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { 
background: #3b3b3b; 
} 
li:hover ul { 
    display: block; 
    position: absolute; 
} 
li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #3b3b3b; } 
li:hover li a:hover { 
    background: #1e7c9a; 
} 

</style> 
</head> 

<body> 


<ul id="menu"> 
<li><a href="#">Home</a></li> 
<li><a href="#">Portfolio</a> 
<ul> 
<li><a href="#">Web Design</a></li> 
<li><a href="#">Graphic Design</a></li> 
<li><a href="#">Logo Design</a></li> 
<li><a href="#">Blog Design</a></li> 
</ul> 
</li> 
<li><a href="#">Projects</a> 
<ul> 
<li><a href="#">This is a project</a></li> 
<li><a href="#">So is this</a></li> 
<li><a href="#">and this</a></li> 
<li><a href="#">don't forget this too</a></li> 
</ul> 
</li> 
<li><a href="#">Contact</a> 
<ul> 
<li><a href="#">Support</a></li> 
<li><a href="#">Quote</a></li> 
<li><a href="#">General Enquiry</a></li> 
</ul> 
</li> 
</ul>

我繼續把它的jsfiddle Here

來源

2014-06-06 mystycs

所以，你希望所有的4個按鈕爲中心？要麼？ – tsHunter

我使用中心並將內聯塊放入ul中，並且它工作正常http://jsfiddle.net/kXCz8/7/ –

我假設你實際上想要居中列表項而不是菜單。

JSfiddle Demo

修訂CSS

ul { 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0 auto; 
    padding: 0; 
    list-style: none; 
    text-align: center; /* added this */ 
    font-size:0; /* whitespace adjustment */ 
} 
ul li { 
    font-size:1rem; /* font-size reset */ 
    display: block; 
    position: relative; 
    /* float: left; removed this */ 
    display: inline-block; 
} 
li ul { 
    display: none; 
} 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #1e7c9a; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { 
background: #3b3b3b; 
} 
li:hover ul { 
    display: block; 
    position: absolute; 
} 
li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #3b3b3b; } 
li:hover li a:hover { 
    background: #1e7c9a; 
}

來源

2014-06-06 15:28:13

你想整個菜單的中心呢？如果是這樣，它有助於堅持所有內的東西，就像一個table或div

，所以我增加了以下到您的代碼：

CSS

#navbar { 
    width: 50%; 
    margin: 0 auto; 
    }

HTML

<div id="navbar"> 
all your ul/li's 
</div>

all together

<style type="text/css"> 
    ul { 
     font-family: Arial, Verdana; 
     font-size: 14px; 
     margin: 0; 
     padding: 0; 
     list-style: none; 
    } 
    ul li { 
     display: block; 
     position: relative; 
     float: left; 
    } 
    li ul { 
     display: none; 
    } 
    ul li a { 
     display: block; 
     text-decoration: none; 
     color: #ffffff; 
     border-top: 1px solid #ffffff; 
     padding: 5px 15px 5px 15px; 
     background: #1e7c9a; 
     margin-left: 1px; 
     white-space: nowrap; 
    } 
    ul li a:hover { 
    background: #3b3b3b; 
    } 
    li:hover ul { 
     display: block; 
     position: absolute; 
    } 
    li:hover li { 
     float: none; 
     font-size: 11px; 
    } 
    li:hover a { background: #3b3b3b; } 
    li:hover li a:hover { 
     background: #1e7c9a; 
    } 

    #navbar { 
    width: 50%; 
    margin: 0 auto; 
} 

    </style> 
    </head> 

    <body> 

    <div id="navbar"> 
    <ul id="menu"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Portfolio</a> 
    <ul> 
    <li><a href="#">Web Design</a></li> 
    <li><a href="#">Graphic Design</a></li> 
    <li><a href="#">Logo Design</a></li> 
    <li><a href="#">Blog Design</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Projects</a> 
    <ul> 
    <li><a href="#">This is a project</a></li> 
    <li><a href="#">So is this</a></li> 
    <li><a href="#">and this</a></li> 
    <li><a href="#">don't forget this too</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Contact</a> 
    <ul> 
    <li><a href="#">Support</a></li> 
    <li><a href="#">Quote</a></li> 
    <li><a href="#">General Enquiry</a></li> 
    </ul> 
    </li> 
    </ul> 
     </div>

來源

2014-06-06 15:23:01 Austin

這裏是一個的jsfiddle該演示是我認爲你是後：JSFiddle

基本上，我改變了你的父母<li>到display: inline-block並刪除了float: left屬性。爲了集中那些父導航項目，我將text-align: center應用於父項<ul>。然後我將嵌套下拉列表ul ul更改爲text-align: left，然後將那些<li>的值設置爲display: block。

最後的CSS（改變了一些選擇的目標不同）：

ul { 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    text-align: center; /* added this */ 
} 
ul > li { 
    display: inline-block; /* changed from display: block */ 
    position: relative; 
    /*float: left;*/ 
} 
ul ul { text-align: left; } /* added this */ 
li ul { 
    display: none; 
} 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #1e7c9a; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul ul li { display: block; } /* added this */ 
ul li a:hover { 
background: #3b3b3b; 
} 
li:hover ul { 
    display: block; 
    position: absolute; 
} 
li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #3b3b3b; } 
li:hover li a:hover { 
    background: #1e7c9a; 
}

來源

2014-06-06 15:32:06 dward

不能中心下拉菜單

回答

相關問題