下拉列表对齐问题（HTML/CSS）

-1

我以前曾问过这样的问题，但我上次使用不同的代码。下拉列表对齐问题（HTML/CSS）

我试图创建一个下拉菜单。 Ther是主列表中某些有下拉列表（News and Team）的元素。出于某种原因，他们被移到右边。我想要的是下拉菜单中的项目与其父项对齐。

任何帮助，将不胜感激。

感谢

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

来源

2016-02-13 Chosen1

-1

我只想说一个非常感谢你所有的答案。我不知道为什么这么长时间，但我终于明白了。

在我显示的codepen中，有一件重要的事情是我要离开的：Mobile-Responsive框架的CSS文件，称为Foundation。该CSS文件具有所有ul标签有1.25em的余裕。这就是为什么ul标签被移到右侧的原因。

要解决这个问题，我改变了以下内容：

nav ul ul { 
    display: none; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
}

我加了一个margin属性，现在它是所有罚款。

再次感谢所有帮助我解答此问题的人，并感谢您浪费时间。

祝你一切顺利。

来源

2016-02-20 14:36:19 Chosen1

网页上的某些元素有标准padding值。例如，所有列表都有padding-left。如果你想改变这个试试这个：

在你的CSS代码补充一点：

ul { 
    padding: 0; 
}

也可以添加进来特定id或class此菜单，并改变填充他们。

来源

2016-02-13 16:18:59 semanser

你能给我一个codepen/jsfiddle的例子。我无法让它工作。 – Chosen1

如果您可以展示一个现场示例，那将非常感激。 – Chosen1

你只需要添加padding: 0您nav ul ul规则，所以它看起来像这样：

nav ul ul { 
    display: none; 
    position: absolute; 
    padding: 0; 
}

默认情况下，ul元素具有40像素的左填充，你需要删除的留白，使第二级ul与第一个对齐。

来源

2016-02-19 22:53:37 jmoerdyk

标出了你的答案，因为（间接）你帮助了我，并且为了解决这个问题，我付出了一分一毫的代价。检查我的答案，你会明白我的意思。谢谢！ – Chosen1

下拉列表对齐问题（HTML/CSS）

回答

相关问题