Question

我试着有一个菜单，我左边有一些链接浮动，然后我有一个div，其中有一些链接我希望在右边浮动。

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

此外，: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

Check this fiddle here

之所以发生这种情况，是因为您使用了菜单列表中的ul 和菜单链接与div 。

在基本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
}

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

试试这个

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

this fiddle怎么样？

通常最好浮动ul并提供li display: inline;

ul也有默认的边距和填充，因此您需要使用某种重置

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

Answer 5

您可以使用null属性轻松完成此操作，并且您不必使用 li 的浮点显示为水平菜单，而是使用sql8125248

更新了小提琴here

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

5 个答案: