下拉列表對齊問題（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）

回答

相關問題