导航容器两端的2个UL菜单

Question

我在导航容器中有2个ul菜单，一个菜单向左浮动，另一个菜单向左浮动。我尝试使用vertical-align: bottom让菜单位于导航容器的底部，但它们仍然位于顶部。有没有办法让他们下降到底部？

CSS / HTML

＆＃13;

＆＃13;

nav {
  background-color: red;
  height: 40px;
  vertical-align: bottom;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#men1 li {
  float: left;
}
#men1:after {
  clear: both;
}
#men2 li {
  float: right;
}
#container {
  clear: both;
}
a {
  display: block;
  width: 60px;
  background-color: #dddddd;
}

＆＃13;

<nav>
  <ul id="men1">
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
  <ul id="men2">
    <li><a href="#home">Home2</a>
    </li>
    <li><a href="#news">News2</a>
    </li>
  </ul>
</nav>
<div id="container">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我理解正确： 这是working fiddle

重要部分： 将nav位置设置为相对

nav{
    position: relative;
    ...
}

（position relative的原因是位置绝对元素必须位于相对div的位置

然后为men1和men2添加两个css，如下所示：

#men1 {
    position:absolute;
    bottom:0;
    left:0; //similar to float: left; but because of the position:abolute; part, float wont work
}
#men2 {
    position:absolute;
    bottom:0;
    right:0;
}

Answer 2

您可以尝试使用position属性。这里有a fiddle和一个工作示例：

nav {
  background-color: red;
  height: 40px;
  position: relative;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  width: 50%;
}
nav > ul#men1 > li {
  float: left;
  margin-right: 0.7em;
}
nav > ul#men2 > li {
  float: right;
  margin-left: 0.7em;
}
ul#men1 {
  left: 0px;
}
ul#men2 {
  right: 0px;
}
a {
  display: block;
  background-color: #dddddd;
}

<nav>
  <ul id="men1">
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
  <ul id="men2">
    <li><a href="#home">Home2</a>
    </li>
    <li><a href="#news">News2</a>
    </li>
  </ul>
</nav>

Answer 3

对于像这样的事情我是display: table的忠实粉丝。 Compatible IE8 +

• 两个无序列表被赋予display: table和height: 100%以填充导航高度

• 两个无序列表“表格”在示例中左右浮动

• 列表项目为display: table-cell

• vertical-align: bottom现在将按预期工作

工作示例

* {
  margin: 0;
  padding: 0;
}
nav {
  background-color: red;
  height: 40px;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: table;
  height: 100%;
}
#men1 {
  float: left;
}
#men2 {
  float: right;
}
nav li {
  display: table-cell;
  vertical-align: bottom;
  width: 60px;
}
a {
  display: block;
  padding: 5px;
  background-color: #dddddd;
}

<nav>
  <ul id="men1">
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
  <ul id="men2">
    <li><a href="#home">Home2</a>
    </li>
    <li><a href="#news">News2</a>
    </li>
  </ul>
</nav>