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

基本上如果你做一个垂直导航栏，它会变成:

Item1
Item2
Item3

但是我想让Item1和Item2在上面，Item3在下面，所以它看起来像

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

有办法做到这一点吗?我看到过这样的例子，比如在Item3上创建另一个div元素并使其浮动，但如果屏幕变得太短，则会使Item3重叠在Item1和Item2上。

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

将列表相对放置。
列表的前两项可以放置，不需要任何特殊的样式。

最后一个列表项将被放置在绝对位置，并给出一个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>

你可以给item 3添加一个id，并改变它的外边距:

HTML

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

CSS

#item3{margin-top:20px;}

你可以像这样使用子选择器(如果你想选择一个特定的li)

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

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

li:last-child {
    margin-top:20px;
    background: #ff0000;
}

相关内容

最新更新

热门标签：