下拉列表对齐问题（HTML / CSS） [英] Dropdown list alignment issue (HTML/CSS)
问题描述
我以前问过这样的问题，但我最后一次使用的是不同的代码。
I've asked a question like this before, but I am using differnt code to last time.
我试图创建一个下拉菜单。 Ther是在那个主列表中的具有下拉列表（新闻和团队）的某些元素。由于某种原因，他们被移动到右边。我想要的是下拉菜单中的项目与其父项对齐。
I'm trying to create a dropdown menu. Ther are certain elements in that main list that have a dropdown list (News and Team). For some reason, they are moved over to the right. What I would like is for the items in the dropdown to be aligned with its parent.
任何帮助都会感激。
感谢
http：// codepen .io / DocRow10 / pen / hjIkq
<body>
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo.png" />
<h1>Test Website</h1>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Social Events</a></li>
</ul>
</li>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Players</a></li>
<li><a href="#">Fixtures/Results</a></li>
<li><a href="#">Statistics</a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
body {
background-color: rgb(200, 220, 255);
/* #455868 */
}
#container {
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 100%;
text-align: center;
}
#crest {
height: 150px;
width: 180px;
display: inline-block;
}
#banner h1 {
display: inline-block;
}
/* Bat Colour rgb(38, 124, 196); */
@media only screen and (min-width : 480px) {
#banner h1 {
font-size: 30px;
display: inline-block;
}
}
@media only screen and (min-width : 768px) {
#banner h1 {
font-size: 36px;
display: inline-block;
}
}
@media only screen and (min-width : 980px) {
#banner h1 {
font-size: 47px;
display: inline-block;
}
}
nav {
height: 40px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgb(238, 0, 0);
font-size: 13pt;
font-family: neris;
border-bottom: 2px solid #283744;
}
nav > ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav > ul > li {
display: inline;
float: left;
}
nav ul a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul ul li {
display: block;
}
main {
width: 90%;
height: 200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(38, 124, 196);
}
footer {
width: 90%;
height: 50px;
margin-right: auto;
margin-left: auto;
background-color: rgb(0, 0, 0);
}
推荐答案
大谢谢你的所有答案。我不知道为什么这么长时间，但我终于想出来了。
I just want to say a big thank you for all your answers. I don't know why it's taken so long, but I've finally figured it out.
在我显示的代码中，有一件重要的事情我离开：Mobile-Responsive框架的CSS文件，称为Foundation。该CSS文件具有所有ul标签具有1.25em的margin-left。这是为什么ul标签移动到右边。
In the codepen I displayed, there was one important thing I was leaving off: The CSS file for the Mobile-Responsive framework known as Foundation. That CSS File had all ul tags have a margin-left of 1.25em. That is why the ul tag was moved over to the right.
为了解决这个问题，我改变了以下：
To fix this problem, I changed the following:
nav ul ul {
display: none;
position: absolute;
padding: 0;
margin: 0;
}
我添加了margin属性，现在一切正常。
I added a margin property and now it is all fine.
再次感谢所有帮助我这个答案的人，对不起浪费你的时间。
Again, thank you to everyone who helped me with this answer and sorry for wasting your time.
祝你好运。
这篇关于下拉列表对齐问题（HTML / CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
