菜單鏈接左右浮動，但在高度方面對齊中心

Question

我試圖有一個菜單，我有一些鏈接浮在左邊，然後我有一個div與我想浮在右邊的一些鏈接。

我試圖用下面的代碼來做到這一點，它工作，但左側鏈接和右側鏈接沒有對齊在菜單的中心在height方面，你知道爲什麼嗎？

而且:hover效果不佔用整個菜單的height。

CODE：

.container { 
 
    width: 100%; 
 
    background: yellow; 
 
    float: left; 
 
} 
 
.content { 
 
    height: 50px; 
 
} 
 
.menu-list { 
 
    list-style: none; 
 
} 
 
.menu-list li { 
 
    float: left; 
 
} 
 
.menu-links { 
 
    float: right; 
 
} 
 
.menu-list li a { 
 
    color: #aaa; 
 
    text-decoration: none; 
 
    line-height: 50px; 
 
    font-weight: bold; 
 
} 
 
.menu-list li a:hover { 
 
    background: red; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    <ul class="menu-list"> 
 
     <li><a title="" href="">Home</a> 
 
     </li> 
 
     <li><a title="" href="">Home</a> 
 
     </li> 
 
     <li><a title="" href="">Home</a> 
 
     </li> 
 
     <li><a title="" href="">Home</a> 
 
     </li> 
 
     <li><a title="" href="">Home</a> 
 
     </li> 
 
     <li><a title="" href="">Home</a> 
 
     </li> 
 
     <li><a title="" href="">Home</a> 
 
     </li> 
 
    </ul> 
 
    <div class="menu-links"> 
 
     <a href="">Link 1</a> 
 
     <a href="">Link 2</a> 
 
    </div> 
 
    </div> 
 
</div>

JsFiddle

Answer 1

試試這個

.container{ 
 
    width:100%; 
 
    background:yellow; 
 
    float:left; 
 
} 
 

 
.content{ 
 
     height: 50px; 
 
} 
 

 
.menu-list{ 
 
    list-style:none; 
 
    margin: 0; 
 
    float: left; 
 
} 
 

 
.menu-list li{ 
 
    display: inline-block; 
 
} 
 

 
.menu-links{ 
 
    float: right; 
 

 
} 
 
.menu-links a{ 
 
    line-height: 50px; 
 
} 
 

 
.menu-list li a{ 
 
    color:#aaa; 
 
    text-decoration: none; 
 
    line-height: 50px; 
 
    font-weight: bold; 
 

 

 
} 
 

 
.menu-list li a:hover{ 
 
    background:red; 
 
    padding: 16px 0px; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    <ul class="menu-list"> 
 
     <li><a title="" href="">Home</a></li> 
 
     <li><a title="" href="">Home</a></li> 
 
     <li><a title="" href="">Home</a></li> 
 
     <li><a title="" href="">Home</a></li> 
 
     <li><a title="" href="">Home</a></li> 
 
     <li><a title="" href="">Home</a></li> 
 
     <li><a title="" href="">Home</a></li> 
 
    </ul> 
 
    <div class="menu-links"> 
 
     <a href="">Link 1</a> 
 
     <a href="" >Link 2</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

*修訂，使CSS只

會是這樣的工作？您只需要知道導航欄的高度，並將該高度的僞元素添加到每個單獨的導航部分。 https://jsfiddle.net/will0220/wg7hwc7s/

只需將它們設置爲顯示：inline-block和vertical-align：middle，將它們與導航欄的高度保持居中，並將其與僞元素進行比較。這應該適用於每個按鈕中的任意數量的文本行。

.container{ 
    width:100%; 
    background:yellow; 
    float:left; 
} 
.menu-list{ 
    list-style:none; 
} 
.menu-list{ 
    float: left; 
    padding: 0; 
    margin: 0; 
} 
.menu-links{ 
    float: right; 
} 
.menu-list li a{ 
    color:#aaa; 
    text-decoration: none; 
    line-height: 50px; 
    font-weight: bold; 
} 
.menu-list:before, .menu-links:before{ 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    height: 50px; 
    width: 0; 
} 
.menu-list li, .menu-links a{ 
    display: inline-block; 
    vertical-align: middle; 
} 
.menu-list li a:hover{ 
    background:red; 
} 

Answer 3

如何this fiddle？

這是一般更好地浮在ul並給予lidisplay: inline;

ul也有一個默認margin和padding上，所以你需要使用某種形式的復位

ul.menu-list{ 
    margin: 0 0 0 15px; 
    padding: 0; 
} 

Answer 4

你可以使用display:table-cell財產很容易做到這一點，也不必使用浮動李顯示爲橫向菜單，而不是使用display:inline

更新小提琴here

Answer 5

Check this fiddle here

這是因爲，你已經使用菜單列表與UL，並與格菜單鏈接。

在基本HTML中，ul具有預定義的填充和邊距。因此，首先要明確填充和邊距，然後相應的菜單列表和菜單鏈接。

而不是增加額外的空間或以下的HTML元素的使用，

<div class="container"> 
    <div class="content"> 
     <ul class="menu-list"> 
      <li><a title="" href="">Home</a></li> 
      <li><a title="" href="">Home</a></li> 
      <li><a title="" href="">Home</a></li> 
      <li><a title="" href="">Home</a></li> 
      <li><a title="" href="">Home</a></li> 
      <li><a title="" href="">Home</a></li> 
      <li><a title="" href="">Home</a></li> 
     </ul> 
     <ul class="menu-links"> 
      <li><a href="">Link 1</a></li> 
      <li><a href="">Link 2</a></li> 
     </ul> 
    </div> 
</div> 

而且你們各自的CSS會，

body { 
    padding: 0; 
    margin: 0 
} 

.container { 
    display: block; 
    width: 100%; 
    background: yellow; 
    clear: both; 
    padding: 10px; 
} 

.container:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

a { 
    text-decoration: none 
} 

.menu-list, 
.menu-links { 
    list-style: none; 
    margin: 0; 
    padding: 0 
} 

.menu-list { 
    float: left 
} 

.menu-links { 
    float: right 
} 

.menu-list li, 
.menu-links li { 
    display: inline-block 
}