如何在該代碼中垂直對齊li中的元素？

Question

我要垂直對齊的a類鏈接下1-4 dropdown-menu.

在此示例中，我試圖通過將div顯示為table-row來實現此目的，但是沒有任何效果。

碼

 body { font-family: 'Arial', sans-serif; max-width: 960px; margin: 0 auto; padding: 20px; } ul { list-style-type: none; margin: 0; padding: 0; background-color: #1ebb90; overflow: hidden; } li { float: left; } li a, .dropdown-btn { display: inline-block; padding: 18px 22px; } div { display: table-row; } div a { display: inline; vertical-align: middle; } 

 <ul> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Blog</a> </li> <li class="dropdown"> <a href="#" class="dropdown-btn">Dropdown</a> <div class="dropdown-menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> </li> </ul> 

Answer 1

可以使用不同的方法，但是一種簡單的方法是使用display: block鏈接。 （ 小提琴 ）

這是與內聯與阻止工作原理有關的相關問題/答案 。

Answer 2

[1]擺脫overflow: hidden在ul

[2]使下拉列表絕對定位：

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  visibility: hidden;
}

[3]建立li為父母。

li {
  ...
  position: relative;
}

[4]在隱藏的下拉菜單旁邊的錨點上設置懸停規則。

.dropdown:hover .dropdown-menu {
  visibility: visible;
}

演示 ： https : //jsfiddle.net/b3gbowrn/

 body { font-family: 'Arial', sans-serif; max-width: 960px; margin: 0 auto; padding: 20px; } ul { list-style-type: none; margin:0; padding: 0; background-color: #1ebb90; } li { float: left; position: relative; border: 1px solid rgba(0,0,0,0.25); border-right: none; } li:last-child { border: 1px solid rgba(0,0,0,0.25); } .dropdown:hover .dropdown-menu { visibility: visible; } .dropdown-menu { position: absolute; top: 100%; left: 0; visibility: hidden; } li a, .dropdown-btn { display: inline-block; padding: 18px 22px; } div { display: table-row; } div a { display: inline; vertical-align: middle; } 

  <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li class="dropdown"> <a href="#" class="dropdown-btn">Dropdown</a> <div class="dropdown-menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> </li> </ul> 

Answer 3

• 在li使用inline-block

• 通過在下拉列表中使用ul li將HTML更改為語義上正確的菜單

• 應用於您的下拉position:absolute和top:100% relative對於li top:100%

• 如果要使其顯示/隱藏，可以在li使用:hover

 body { font-family: 'Arial', sans-serif; max-width: 960px; margin: 0 auto; padding: 20px; } ul { list-style-type: none; margin: 0; padding: 0; background-color: #1ebb90; } li { display: inline-block; vertical-align: top; position: relative } li a, .dropdown-btn { display: block; padding: 18px 22px; } li ul { position: absolute; top: 100%; left: 0; background: red; display: block; width: 100%; text-align: center; display: none } li:hover ul { display: block } 

 <ul> <li><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Blog</a> </li> <li class="dropdown"> <a href="#" class="dropdown-btn">Dropdown</a> <ul class="dropdown-menu"> <li> <a href="#">Link 1</a> </li> <li> <a href="#">Link 2</a> </li> <li> <a href="#">Link 3</a> </li> <li> <a href="#">Link 4</a> </li> </ul> </li> </ul>