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水平導航中心

回答

相關問題