Question

基本上，如果你制作一个垂直导航栏，它就会变成：

Item1
Item2
Item3

但是我想要它让Item1和Item2在顶部，但是Item3在底部，所以它看起来像

-- Top Screen --
Item1
Item2
.. empty ..
Item3
-- Bottom Screen --

有办法做到这一点吗？我看过像在Item3上制作另一个div元素并让它浮动的例子，但如果屏幕变得太短，那么Item3会重叠Item1和Item2。

我在bootstrap中读过一些东西，它有一个名为navbar-right和navbar-left的函数，所以我认为这是可能的。

Answer 1

将您的清单放在相对位置前两个列表项可以放置而不需要任何特殊样式。

最后一个列表项将被置于绝对位置，并给出一个bottom: 0，以便它坚持其父母的底部：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
ul>li {
  display: block;
  border: 1px solid blue;
}
ul>li:last-child {
  position: absolute;
  bottom: 0;
  width: 100%;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Answer 2

您可以使用这样的子托盘（如果您想选择特定的li）

10.10.10.10

或者如果你想选择最后一个：

<!DOCTYPE html>
<html>
<head>
<style> 
li:nth-child(3) {
    margin-top:20px;
    background: #ff0000;
}
</style>
</head>
<body>
<ul>
<li>The first paragraph.</li>
<li>The second paragraph.</li>
<li>The third paragraph.</li>
</ul>
</body>
</html>

Answer 3

您可以为第3项CSS添加ID，并更改其边距：

您的HTML

   <ul>
        <li>item1</li>
        <li>item2</li>
        <li id="item3">item3</li>
   </ul>

你的CSS

#item3{margin-top:20px;}

如何在垂直导航栏中分隔<li>元素（菜单）

3 个答案: