对齐问题
问题描述:
因此,我正在为下拉列表编写一些HML & CSS,并且我得到了它的工作原理,但是在div中添加2个以上元素时遇到了问题,第二个元素之后的元素正在标签。我无法弄清楚有什么问题,有什么建议吗?对齐问题
这里是我的HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional// EN" "http://www.w3.org/TR/xhtmli/DTD.xhtmli-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/dropDown.css">
<meta http-equiv="Content-Type" contents="text/html; charst=utf-8" />
<title> My Website </title>
</head>
<body>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#"> Home </a></li>
</ul>
<ul>
<li><a href="#"> Top 10 Defenders </a>
<ul>
<li><a href="#"> Title 1 </li>
<li><a href="#"> Title 2 </li>
<li><a href="#"> Title 3 </li>
<li><a href="#"> Title 4 </li>
<li><a href="#"> Title 5 </li>
<li><a href="#"> Title 6 </li>
<li><a href="#"> Title 7 </li>
<li><a href="#"> Title 8 </li>
<li><a href="#"> Title 9 </li>
<li><a href="#"> Title 10 </li>
</ul>
</li>
</ul>
<ul>
<li><a href="#"> Top 10 Midfielders </a>
<ul>
<li><a href="#"> Title 1 </li>
<li><a href="#"> Title 2 </li>
<li><a href="#"> Title 3 </li>
<li><a href="#"> Title 4 </li>
<li><a href="#"> Title 5 </li>
<li><a href="#"> Title 6 </li>
<li><a href="#"> Title 7 </li>
<li><a href="#"> Title 8 </li>
<li><a href="#"> Title 9 </li>
<li><a href="#"> Title 10 </li>
</ul>
</li>
</ul>
<ul>
<li><a href="#"> Top 10 Forwards </a>
<ul>
<li><a href="#"> Title 1 </li>
<li><a href="#"> Title 2 </li>
<li><a href="#"> Title 3 </li>
<li><a href="#"> Title 4 </li>
<li><a href="#"> Title 5 </li>
<li><a href="#"> Title 6 </li>
<li><a href="#"> Title 7 </li>
<li><a href="#"> Title 8 </li>
<li><a href="#"> Title 9 </li>
<li><a href="#"> Title 10 </li>
</ul>
</li>
</ul>
<ul>
<li><a href="#"> Best Formations </a>
<ul>
<li><a href="#"> Title 1 </li>
<li><a href="#"> Title 2 </li>
<li><a href="#"> Title 3 </li>
<li><a href="#"> Title 4 </li>
<li><a href="#"> Title 5 </li>
<li><a href="#"> Title 6 </li>
<li><a href="#"> Title 7 </li>
<li><a href="#"> Title 8 </li>
<li><a href="#"> Title 9 </li>
<li><a href="#"> Title 10 </li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
这是我的CSS:
@charset "utf-8";
#navMenu{
margin:0;
width:75%;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}
#navMenu ul li a{
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul{
visibility:visible;
}
所以,我的网页看起来像这样的时刻:
答
你有一个30px的高度在navMenu ul li a ..意思是它会被推下来。
另外我必须指出,你没有正确使用你的列表项。您在上面的列表中的每个项目之后关闭您的未固化列表,这不是neccesairy。我为你做了一个小提琴。
#navMenu ul li a{
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
width:150px;
display:block;
color:#000;
}
答
问题与您的#navMenu ul li a
的height:30px;
,将其删除nd一切都会好起来的:
#navMenu ul li a{
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
width:150px;
display:block;
color:#000;
}
答
您需要关闭锚定体。
<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional// EN" "http://www.w3.org/TR/xhtmli/DTD.xhtmli-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/dropDown.css">
<meta http-equiv="Content-Type" contents="text/html; charst=utf-8" />
<title> My Website </title>
</head>
<body>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#"> Home </a></li>
</ul>
<ul>
<li><a href="#"> Top 10 Defenders </a>
<ul>
<li><a href="#"> Title 1 </a></li>
<li><a href="#"> Title 2 </a></li>
<li><a href="#"> Title 3 </a></li>
<li><a href="#"> Title 4 </a></li>
<li><a href="#"> Title 5 </a></li>
<li><a href="#"> Title 6 </a></li>
<li><a href="#"> Title 7 </a></li>
<li><a href="#"> Title 8 </a></li>
<li><a href="#"> Title 9 </a></li>
<li><a href="#"> Title 10 </a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#"> Top 10 Midfielders </a>
<ul>
<li><a href="#"> Title 1 </a></li>
<li><a href="#"> Title 2 </a></li>
<li><a href="#"> Title 3 </a></li>
<li><a href="#"> Title 4 </a></li>
<li><a href="#"> Title 5 </a></li>
<li><a href="#"> Title 6 </a></li>
<li><a href="#"> Title 7 </a></li>
<li><a href="#"> Title 8 </a></li>
<li><a href="#"> Title 9 </a></li>
<li><a href="#"> Title 10 </a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#"> Top 10 Forwards </a>
<ul>
<li><a href="#"> Title 1 </a></li>
<li><a href="#"> Title 2 </a></li>
<li><a href="#"> Title 3 </a></li>
<li><a href="#"> Title 4 </a></li>
<li><a href="#"> Title 5 </a></li>
<li><a href="#"> Title 6 </a></li>
<li><a href="#"> Title 7 </a></li>
<li><a href="#"> Title 8 </a></li>
<li><a href="#"> Title 9 </a></li>
<li><a href="#"> Title 10 </a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#"> Best Formations </a>
<ul>
<li><a href="#"> Title 1 </a></li>
<li><a href="#"> Title 2 </a></li>
<li><a href="#"> Title 3 </a></li>
<li><a href="#"> Title 4 </a></li>
<li><a href="#"> Title 5 </a></li>
<li><a href="#"> Title 6 </a></li>
<li><a href="#"> Title 7 </a></li>
<li><a href="#"> Title 8 </a></li>
<li><a href="#"> Title 9 </a></li>
<li><a href="#"> Title 10 </a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
+1
尽管这不是OP的当前问题,但这确实是他应该考虑的问题 – Dorvalla 2014-12-01 16:15:18
在你的'#navMenu ul ul'你有'top:30px;'。如图所示,这会将所有内容降低(与'position:absolute;'结合使用)。 – Sablefoste 2014-12-01 16:08:08
尝试正确关闭您的链接''。 – j08691 2014-12-01 16:10:11