居中导航栏... [英] Centering a navigation bar…
问题描述
首先，让我为提出这样一个新手问题道歉。我试图在网站上搜索类似的问题/答案，但没有一个修复工作。所以这里：
First of all let me apologize for asking such a newbie question. I have tried to search on the site for similar questions/answers but none of the fixes have worked. So here goes:
我从一个流行的YouTube教程创建了一个水平导航栏，并有一切工作正常，除了一个问题：我真的想中心此导航栏在导航包含div。我知道必须有一个容易的解决方案，但对于边缘的生活想出来。
I have created a horizontal navigation bar from a popular YouTube tutorial and have got everything working just fine with the exception of one problem: I would really like to center this navigation bar which is within the navigation containing div. I know there must be an easy solution, but for the life of the edges Figured out.
我还有另一个关于CSS的问题：为什么作者制作CSS规则，在id标签之前包含ul标签。例如，为什么他写ul＃navMenu而不是#navMenu ul？
I also had another question about the CSS: why did the author make CSS rules that included the ul tag before the id tag. For example, why did he write ul#navMenu instead of #navMenu ul?
这是HTML：
<body>
<div id="wrapper">
<div id="header"> <h1>The New Site
</h1></div>
<div id="navigation">
<ul id="navMenu">
<li><a href="#">Home</a></li>
<li><a href="#">hyperlink 2</a>
<ul class="sub1">
<li><a href="#">hyperlink 2.1</a></li>
<li><a href="#">hyperlink 2.2</a>
<ul class="sub2">
<li><a href="#">hyperlink 2.2.1</a></li>
<li><a href="#">hyperlink 2.2.2</a></li>
<li><a href="#">hyperlink 2.2.3</a></li>
</ul>
</li>
<li><a href="#">hyper link 2.3</a></li>
</ul>
</li><!--close hyperlink 2 -->
<li><a href="#">hyperlink 3</a></li>
<li><a href="#">hyperlink 4</a></li>
<li><a href="#">hyperlink 5</a></li>
<li><a href="#">hyperlink 6</a></li>
</ul><!--close main ul – navMenu -->
</div><!--close of navigation -->
<div id="main-text"> Etc........
这里是CSS：*注意： 。之前所有的ul＃mainNave规则，以便他们会出现。
And here's CSS: *Note: I had to put a . Before all of the ul#mainNave rules so that they would show up.
.* {
margin: 0px;
padding: 0px;
}
.body {
background-color:#FF9;
}
#wrapper {
width: 1000px;
margin: 0px auto;
padding: 0px;
background-color:#FCC;
}
#header {
margin: 0px;
padding: 0;
width: 100%;
height: 100px;
float: left;
background-color:#FEA601;
}
#navigation {
margin: 0px;
padding: 0px;
width: 100%;
height: 50px;
float: left;
vertical-align: middle;
background-color:#7979FF;
}
/*CSS for navigation hyperlinks*/
#navigation {
margin: 0 auto;
}
.ul#navMenu {
list-style-type: none;
}
.ul#navMenu, ul.sub1, ul.sub2 {
list-style-type: none;
font-size: 10pt;
}
.ul#navMenu li {
width: 135px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
.ul#navMenu a {
text-decoration: none;
display: block;
width: 135px;
height: 25;
line-height: 25px;
background-color: #000;
border: 1px solid #FFF;
border-radius: 0px;
color:#FFF;
}
.ul#navMenu .sub1 a {
margin-top: 0px;
}
.ul#navMenu .sub1 li {
}
.ul#navMenu .sub2 a {
margin-left: 0px;
}
.ul#navMenu li:hover > a {
background-color:#666;
}
.ul#navMenu li:hover a:hover {
background-color: #666;
}
.ul#navMenu ul.sub1 {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
.ul#navMenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 137px;
}
.ul#navMenu li:hover .sub1 {
display: block;
}
.ul#navMenu .sub1 li:hover .sub2 {
display: block;
}
/*end of navigation rules*/
/*Body rules*/
#main-text {
background-color:#FEC94B;
width: 970px;
Padding: 15px;
Height: auto;
float: left;
}
#footer {
width: 100%;
float: left;
height: 50px;
line-height: 50px;
background-color: #000;
color: #FFF;
text-align: center;
font-size: 10px;
}
#wrapper #navigation #navMenu {
text-align: center;
}
非常感谢，我非常期待解决这个问题。
Thank you so much in advance and I greatly look forward to solving this problem.
Doug
编辑：我不确定是什么错，但很多CSS代码没有显示up - 它都以ul＃navMenu开始。这正是我的问题的一部分，为什么作者写这样的CCS代码。
I'm not sure what wrong but a lot of the CSS code did not show up – it all started with ul#navMenu.... Which happen to be part of my question as to why the author was writing CCS code like this.
推荐答案
现在不在中心的原因是在你的css中，这里：
The reason it isn't centered at the moment is in your css, here:
ul#navMenu li {
...
float: left;
}
将其更改为inline-block，如下所示：
Change it to inline-block, like so:
ul#navMenu li {
display: inline-block;
/* old IE hack to get inline-block to work */
zoom: 1;
*display: inline;
}
添加 text-align 到容器：
ul#navMenu {
...
text-align: center;
}
这将允许他们居中，而不是强制他们离开。确保父容器在其上具有 text-align：center; 。
And that will allow them to center, instead of forcing them left. Ensure the parent container(s) have text-align: center; on them.
请参阅更新jsFiddle
最后，css选择器：
-
ul＃navMenu- 选择具有navMenu -
#navMenu ul- 选择 元素的ID为navMenu -
ul＃navMenu解决任何ul元素的id为navMenu，但也可以写成#navMenu -
ul＃navMenu li- 选择所有li元素navMenu- 也可以写成#navMenu li，因为ID应该只在页面上出现一次。 li>
ul#navMenu- selects the ul that has the ID ofnavMenu#navMenu ul- selects the ul that is the child of an element with the id ofnavMenuul#navMenu- ensures it only addresses anyulelements with id ofnavMenu, but could also be written simply#navMenuul#navMenu li- selects all the li elements that are the child of the ul with the id ofnavMenu- could also be written#navMenu li, since an ID should only occur once on a page.
这篇关于居中导航栏...的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
