Question

首先让我为提出这样一个新手问题而道歉。我试图在网站上搜索类似的问题/答案，但没有一个修复工作。所以这里：

我已经从流行的YouTube教程中创建了一个水平导航栏，除了一个问题之外，所有内容都运行得很好：我真的想将这个导航栏放在包含div的导航栏中。我知道必须有一个简单的解决方案，但对于边缘的生命想象出来。

我还有另一个关于CSS的问题：为什么作者在id标签之前制作包含ul标签的CSS规则。例如，他为什么写ul＃navMenu而不是#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规则出现之前，它们就会显示出来。

.* {
    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;
}

非常感谢你，我非常期待解决这个问题。

道格

编辑：我不确定错误但很多CSS代码没有显示 - 这一切都始于ul＃navMenu ....这恰好是我的问题的一部分，为什么作者写作像这样的CCS代码。

JSFIDDLE

Answer 1

目前不在中心的原因在于你的css，这里：

ul#navMenu li {
   ...
   float: left;
}

将其更改为内联块，如下所示：

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;。

请参阅updated jsFiddle

最后，css选择器：

ul#navMenu - 选择ID为navMenu
#navMenu ul - 选择名为navMenu

子元素

ul#navMenu - 确保它仅处理ID为ul的所有navMenu个元素，但也可以只写#navMenu
ul#navMenu li - 选择id为navMenu的ul的子元素的所有li元素 - 也可以写成#navMenu li，因为ID只应出现一次页。

使导航栏居中......

1 个答案: