菜单链接左右浮动，但在高度方面对齐中心

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 
}