带有链接的菜单在左右浮动，但在高度方面居中对齐

Question

我试图有一个菜单，其中一些链接浮动在左侧，然后我有一个 div，其中一些我想浮动在右侧。

我正在尝试使用下面的代码执行此操作，并且它正在工作，但是左侧链接和右侧链接在菜单中心没有对齐height，你知道为什么吗？

而且:hover 效果也没有占据菜单的整个height。

代码：

.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

Check this fiddle here

这是因为，您使用 menu-list 和 ul 和 menu-links 和 div。

在基本的 HTML 中，ul 具有预定义的内边距和边距。因此，首先清除内边距和边距，然后相应地设置 menu-list 和 menu-links 的样式。

不要在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
}

Answer 3

您可以使用display:table-cell 属性轻松做到这一点，而且您不必使用浮动 li 来显示为水平菜单，而是使用display:inline

更新小提琴here

Answer 4

*修改为仅制作 CSS

这样的东西有用吗？您只需要知道导航栏的高度，并将该高度的伪元素添加到每个单独的导航部分。 https://jsfiddle.net/will0220/wg7hwc7s/

只需将它们设置为 display: 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 5

this fiddle怎么样？

一般情况下最好将ul浮动并给出lidisplay: inline;

ul 还具有默认边距和填充，因此您需要使用某种重置方式

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