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

仅更改此内容：

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

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

Answer 2

每当你想制作一个div中心或任何html元素时。你需要一个容器（例如div或ul或任何其他容器）并将html元素放在该容器中，并为具有 margin：0 auto 属性的容器提供特定的 width 。通过指定宽度，您的内容不会在视口（浏览器屏幕）上展开，当您指定保证金时，以简写概念（0自动）表示 0 将保留顶级＆amp;底部，而自动将保持左＆amp;通过浏览器自动。

然后无论你放置哪个容器，都可以轻松使用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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

在#NavigationTop ul类中删除padding-left:0，因为默认情况下ul需要填充，默认似乎是padding-left：ul为40px。

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

4 个答案: