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的溢出并仍然显示下拉菜单?谢谢。
答
只更改此:
#NavigationTop ul {
list-style: none;
position: relative;
margin: 0 auto;
padding-right: 1px;
display: inline-block;
}
div#main-nav {
text-align: center;
}
答
无论何时您想制作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>
答
在#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>
答
你可以试试这个https://jsfiddle.net/mnd1b51y/1/
#NavigationTop ul li { position: relative;}
#NavigationTop ul li:hover > ul {
left: 0;
max-width: 210px;
position: absolute;
top: 51px;
}