HTML 水平导航中心

Question

我是 CSS/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>

我确定有很多错误，但是我该怎么做才能使它居中呢？也可以让导航隐藏主 ul 的溢出并仍然显示下拉菜单吗？谢谢你。

Answer 1

每当您想制作一个 div 中心或任何 html 元素时。您需要一个容器（例如 div 或 ul 或任何其他容器）并将 html 元素放入该容器内，并使用属性 边距：0 自动。通过指定宽度，您的内容将不会散布在视口（浏览器屏幕）上，并且当您指定 Margin 时，在 shorthand 概念中（0 auto）表示 0 将保持 Top & Bottom 的边距，而 auto 将保持 Left & Right由浏览器自动。

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

去掉#NavigationTop ul

的宽度

添加特定宽度直到您的菜单不中断然后添加到 #main-nav

#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;
 position:relative;
 margin:0 auto;
 padding-right: 1px;
}

#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>

Answer 2

在 #NavigationTop ul class 中删除 padding-left:0 因为默认情况下 ul 需要填充并且默认似乎是 padding-left:40px for 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>

Answer 3

仅更改此：

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

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

Answer 4

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

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

HTML 水平导航中心

HTML Horizontal Nav Centre

html

css

center

nav