HTML水平导航中心

我是相当新的CSS/HTML，并试图使用下拉菜单制作水平导航。我制作了导航，但我无法将其集中在页面上。HTML水平导航中心

#NavigationTop ul{ 
 
    list-style: none; 
 
    position:relative; 
 
    margin:0 auto; 
 
    padding-right: 1px; 
 
    width: 1075px; 
 
} 
 

 
#NavigationTop ul a{ 
 
    color:#ffffff; 
 
    text-decoration:none; 
 
    font-weight:700; 
 
    font-size:15px; 
 
    padding:0 15px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    line-height: 50px; 
 
    text-transform: uppercase; 
 
} 
 

 
#NavigationTop ul li{ 
 
    background-color: #343434; 
 
    width: 215px; 
 
    height: 50px; 
 
    position:relative; 
 
    float: left; 
 
    margin:0 auto; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
#NavigationTop ul li:hover{ 
 
    background-color: lightseagreen; 
 
} 
 
#NavigationTop ul li a:visited{ 
 
    color: #ffffff 
 
} 
 

 
#NavigationTop ul ul{ 
 
    display:none; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    padding:0; 
 
    margin: 0; 
 
} 
 

 
#NavigationTop ul ul li{ 
 
    float:none; 
 
    width:215px; 
 
    border-bottom: 1px solid; 
 
} 
 

 
#NavigationTop ul li:hover > ul{ 
 
    display: block; 
 
}

<nav id="NavigationTop"> 
 
    <div id="main-nav"> 
 
    <ul> 
 
     <li><a href="index.html">HOME</a></li> 
 
     <li><a href="bio/index.html">BIOGRAPHY</a></li> 
 
     <li><a href="discography/index.html" class="disco">DISCOGRAPHY</a></li> 
 
     <li><a href="media/index.html">MEDIA</a> 
 
     <ul> 
 
      <li><a href="#">Audio</a> 
 
      <li><a href="#">Video</a> 
 
      <li><a href="#">Photos</a> 
 
     </ul> 
 
     </li> 
 
     <li><a href="contact/index.html">CONTACT</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

我敢肯定有很多错误，但我有什么可以做，以它为中心？也有可能让nav隐藏主ul的溢出并仍然显示下拉菜单？谢谢。

来源

2017-09-06 Yukikiru

只更改此：

#NavigationTop ul { 
    list-style: none; 
    position: relative; 
    margin: 0 auto; 
    padding-right: 1px; 
    display: inline-block; 
} 

div#main-nav { 
    text-align: center; 
}

来源

2017-09-06 04:35:59

无论何时您想制作div中心或任何html元素。你需要一个容器（例如。div或ul或任何其他），并将HTML元素放在该容器中，并给出具体的宽度到该容器的属性margin：0 auto。通过指定宽度，你的内容将不会在整个视（布劳尔屏幕）上展开，并在指定保证金，在速记概念（0自动）表示将举办保证金为顶部&底部而汽车将持有左&右自动通过浏览器。

然后，无论您将放置该容器，您都可以轻松使用Floating，以便您的设计看起来很完美。

从#NavigationTop UL取出宽度

添加特定的宽度，直到你的菜单中未破然后添加上＃主导航

#main-nav{ 
    width: 1120px; //in your design case i found it this in px. 
    margin: 0 auto; 
} 


#NavigationTop ul{ 
    list-style: none; 
    position:relative; 
    margin:0 auto; 
    padding-right: 1px; 
}

#main-nav{ 
 
     width: 1120px; //in your design case i found it this in px. 
 
     margin: 0 auto; 
 
    } 
 
    
 
#NavigationTop ul{ 
 
    list-style: none; 
 
\t position:relative; 
 
\t margin:0 auto; 
 
\t padding-right: 1px; 
 
} 
 

 
#NavigationTop ul a{ 
 
\t color:#ffffff; 
 
\t text-decoration:none; 
 
\t font-weight:700; 
 
\t font-size:15px; 
 
\t padding:0 15px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    line-height: 50px; 
 
    text-transform: uppercase; 
 
} 
 

 
#NavigationTop ul li{ 
 
    background-color: #343434; 
 
    width: 215px; 
 
    height: 50px; 
 
\t position:relative; 
 
\t float: left; 
 
\t margin:0 auto; 
 
\t text-align: center; 
 
\t border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
#NavigationTop ul li:hover{ 
 
    background-color: lightseagreen; 
 
} 
 
#NavigationTop ul li a:visited{ 
 
    color: #ffffff 
 
} 
 

 
#NavigationTop ul ul{ 
 
    display:none; 
 
\t position:absolute; 
 
\t top:100%; 
 
\t left:0; 
 
    padding:0; 
 
    margin: 0; 
 
} 
 

 
#NavigationTop ul ul li{ 
 
    float:none; 
 
    width:215px; 
 
    border-bottom: 1px solid; 
 
} 
 

 
#NavigationTop ul li:hover > ul{ 
 
    display: block; 
 
}

<nav id="NavigationTop"> 
 
\t <div id="main-nav"> 
 
\t <ul> 
 
\t  <li><a href="index.html">HOME</a></li> 
 
\t  <li><a href="bio/index.html">BIOGRAPHY</a></li> 
 
\t \t <li><a href="discography/index.html" class="disco">DISCOGRAPHY</a></li> 
 
\t \t <li><a href="media/index.html">MEDIA</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">Audio</a> 
 
\t \t \t \t <li><a href="#">Video</a> 
 
\t \t \t \t <li><a href="#">Photos</a> 
 
\t \t </ul></li> 
 
\t  <li><a href="contact/index.html">CONTACT</a></li> 
 
\t </ul> 
 
    </div> 
 
</nav>

来源

2017-09-06 04:29:31 wikijames

在#NavigationTop ul r类emove padding-left:0，因为默认情况下ul需要填充，默认情况下填充为左侧：40px为ul。

#NavigationTop ul{ 
 
    list-style: none; 
 
    position:relative; 
 
    margin:0 auto; 
 
    padding-right: 1px; 
 
    width: 1075px; 
 
    overflow:auto; 
 
    padding-left:0; 
 
} 
 

 
#NavigationTop ul a{ 
 
    color:#ffffff; 
 
    text-decoration:none; 
 
    font-weight:700; 
 
    font-size:15px; 
 
    padding:0 15px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    line-height: 50px; 
 
    text-transform: uppercase; 
 
} 
 

 
#NavigationTop ul li{ 
 
    background-color: #343434; 
 
    width: 215px; 
 
    height: 50px; 
 
    position:relative; 
 
    float: left; 
 
    margin:0 auto; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
#NavigationTop ul li:hover{ 
 
    background-color: lightseagreen; 
 
} 
 
#NavigationTop ul li a:visited{ 
 
    color: #ffffff 
 
} 
 

 
#NavigationTop ul ul{ 
 
    display:none; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    padding:0; 
 
    margin: 0; 
 
} 
 

 
#NavigationTop ul ul li{ 
 
    float:none; 
 
    width:215px; 
 
    border-bottom: 1px solid; 
 
} 
 

 
#NavigationTop ul li:hover > ul{ 
 
    display: block; 
 
}

<nav id="NavigationTop"> 
 
    <div id="main-nav"> 
 
    <ul> 
 
    <li><a href="index.html">HOME</a></li> 
 
    <li><a href="bio/index.html">BIOGRAPHY</a></li> 
 
    <li><a href="discography/index.html" class="disco">DISCOGRAPHY</a></li> 
 
    <li><a href="media/index.html">MEDIA</a> 
 
     <ul> 
 
     <li><a href="#">Audio</a> 
 
     <li><a href="#">Video</a> 
 
     <li><a href="#">Photos</a> 
 
     </ul> 
 
    </li> 
 
    <li><a href="contact/index.html">CONTACT</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

来源

2017-09-06 04:31:36

你可以试试这个https://jsfiddle.net/mnd1b51y/1/

#NavigationTop ul li { position: relative;} 
#NavigationTop ul li:hover > ul { 
    left: 0; 
    max-width: 210px; 
    position: absolute; 
    top: 51px; 
}

来源

2017-09-06 05:08:15

HTML水平导航中心

回答

相关问题