如何將我的下拉菜單與頁面中心對齊？

因爲我知道你會想我的消息來源，這裏的HTML：

<div id='menu-container'> 
<ul id='menu' class="menu"> 
    <li class='active'><a href='/'><span>Home</span></a></li> 
    <li class='has-sub'><a href='/games/'><span>Games</span></a> 
     <ul> 
     <li><a href='/games/dota-2/'><span>Dota 2</span></a></li> 
     <li><a href='/games/cs-go/'><span>CS: GO</span></a></li> 
     <li><a href='/games/css/'><span>CS: Source</span></a></li> 
     <li><a href='/games/terraria/'><span>Terraria</span></a></li> 
     <li class='last'><a href='/games/minecraft/'><span>Minecraft</span></a></li> 
     </ul> 
    </li> 
    <li class='has-sub'><a href='/about.html'><span>About Us</span></a> 
     <ul> 
     <li><a href='http://www.youtube.com/user/'><span>Our YouTube Channel</span></a></li> 
     <li><a href='/faq-list.html'><span>Our FAQs/Q&amp;A List</span></a></li> 
     <li><a href='/feed-news.rss'><span>Our RSS Feed</span></a></li> 
     <li><a href='/wiki/'><span>Our Wiki</span></a></li> 
     <li><a href='/wiki/'><span>Our Blog</span></a></li> 
       <li class='last'><a href='/privacy.html'><span>Privacy Policy</span></a></li> 
     </ul> 
    </li> 
    <li class='has-sub last'><a href='/contact.html'><span>Contact Us</span></a> 
     <ul> 
     <li class='last'><a href='/forums/'><span>Forums</span></a></li> 
     </ul> 
    </li> 
</ul>

這是我的CSS：

* { 
margin: 0px; 
} 
#menu-container ul, 
#menu-container li, 
#menu-container span, 
#menu-container a { 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
#menu-container { 
    height: 49px; 
    border-radius: 0px 0px 0 0; 
    -moz-border-radius: 0px 0px 0 0; 
    -webkit-border-radius: 0px 0px 0 0; 
    background: #141414; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
    background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); 
    background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -o-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: linear-gradient(to bottom, #32323a 0%, #141414 100%); 
    border-bottom: 2px solid #0fa1e0; 
} 
#menu-container:after, 
#menu-container ul:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 
#menu-container a { 
    background: #141414; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
    background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); 
    background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -o-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: linear-gradient(to bottom, #32323a 0%, #141414 100%); 
    color: #ffffff; 
    display: inline-block; 
    font-family: Helvetica, Arial, Verdana, sans-serif; 
    font-size: 12px; 
    line-height: 49px; 
    padding: 0 20px; 
    text-decoration: none; 
} 
#menu-container ul { 
    list-style: none; 
} 
#menu-container > ul { 
    float: left; 
} 
#menu-container > ul > li { 
    float: left; 
} 
#menu-container > ul > li:hover:after { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #0fa1e0; 
    margin-left: -10px; 
} 
#menu-container > ul > li:first-child > a { 
    border-radius: 0px 0 0 0; 
    -moz-border-radius: 0px 0 0 0; 
    -webkit-border-radius: 0px 0 0 0; 
} 
#menu-container > ul > li:last-child > a { 
    border-radius: 0 0px 0 0; 
    -moz-border-radius: 0 0px 0 0; 
    -webkit-border-radius: 0 0px 0 0; 
} 
#menu-container > ul > li.active > a { 
    box-shadow: inset 0 0 3px #000000; 
    -moz-box-shadow: inset 0 0 3px #000000; 
    -webkit-box-shadow: inset 0 0 3px #000000; 
    background: #070707; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
    background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); 
    background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -o-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: linear-gradient(to bottom, #26262c 0%, #070707 100%); 
} 
#menu-container > ul > li:hover > a { 
    background: #070707; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
    background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); 
    background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -o-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: linear-gradient(to bottom, #26262c 0%, #070707 100%); 
    box-shadow: inset 0 0 3px #000000; 
    -moz-box-shadow: inset 0 0 3px #000000; 
    -webkit-box-shadow: inset 0 0 3px #000000; 
} 
#menu-container .has-sub { 
    z-index: 1; 
} 
#menu-container .has-sub:hover > ul { 
    display: block; 
} 
#menu-container .has-sub ul { 
    display: none; 
    position: absolute; 
    width: 200px; 
    top: 100%; 
    left: 0; 
} 
#menu-container .has-sub ul li { 
    *margin-bottom: -1px; 
} 
#menu-container .has-sub ul li a { 
    background: #0fa1e0; 
    border-bottom: 1px dotted #6fc7ec; 
    filter: none; 
    font-size: 11px; 
    display: block; 
    line-height: 120%; 
    padding: 10px; 
} 
#menu-container .has-sub ul li:hover a { 
    background: #0c7fb0; 
} 
#menu-container .has-sub .has-sub:hover > ul { 
    display: block; 
} 
#menu-container .has-sub .has-sub ul { 
    display: none; 
    position: absolute; 
    left: 100%; 
    top: 0; 
} 
#menu-container .has-sub .has-sub ul li a { 
    background: #0c7fb0; 
    border-bottom: 1px dotted #6db2d0; 
} 
#menu-container .has-sub .has-sub ul li a:hover { 
    background: #095c80; 
} 
#menu-container { 
-moz-box-shadow: 0 0 10px #888; 
-webkit-box-shadow: 0 0 10px #888; 
box-shadow: 0 0 10px #888; 
}

這是很多，但如果我不給它，你」我會告訴我如何將菜單對齊到我的頁面中心（因爲我沒有編碼，這是我的朋友）？而且我也只想要菜單，沒有空的灰色空間。可能嗎？

來源

2013-07-16 PowerUser

聽起來更像「你能爲我做這個嗎？」而不是「我該怎麼做？」 –

是的，一個簡單的方法是給''menu-container'設置一個寬度：346px;'margin：0 auto;'（假設你有權訪問並知道如何編碼CSS）。 @SimonArnold是不是基本上是同一件事？ – Xareyo

這裏是a fiddle，它顯示瞭如何將菜單與屏幕中心對齊。您可以通過搜索「EDITED」來搜索我在CSS中的更改。我以這種方式標記了所有3個變化。

這是我做的。

1.去除，使得整個菜單浮動規則左：

#menu-container > ul { 
    float: left; 
}

他的父元素

2.Specify您希望它在頁面中心：

#menu-container {text-align:center;}

3 。然後爲每個菜單元素更改以下規則：

#menu-container > ul > li { 
    float: left; 
}

到

#menu-container > ul > li { 
    display: inline-block; 
}

至於你最後一個問題（我也只想要菜單，沒有空的灰色空間），我不明白你的意思。你想從菜單欄中刪除灰色的顏色？

來源

2013-07-16 16:43:52

回答

相關問題