Question

我在li列表中有一个ul元素，我希望将其对齐到底部。

+------+
| li1  |
| li2  |
| li3  |
|      |
|      |
|      |
| li4  |
+------+

我该怎么做？

我做过什么：

li4 {
  position: fixed;   
  bottom: 0;
}

这将li4移到了最底层。但是，由于ul位于隐藏菜单中，即使我关闭菜单（这不是我想要的），也会显示li4，因为position: fixed

Answer 1

您可以使用flexbox来实现此目的。演示：

BuildTypeIdentity

build.name

如果您不希望ul { /* just height for demo */ height: 200px; /* become a flex-container */ /* its children will be flex-items */ display: flex; /* move flex-items in column */ flex-direction: column; } /* add maximum available margin-top to last child */ /* this can be replaced with any selector like nth-child */ /* and will move flex-items to the bottom if any available vertical space */ ul > :last-child { margin-top: auto; } /* just outline to show results */ /* should be removed in production */ ul, li { outline: 1px dotted gray; }占用所有容器宽度，请将<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six (at the bottom)</li> </ul>添加到aling-items: flex-start，因为默认情况下会延伸flex-items（默认ul）。

另外，您可以将li添加到中心弹性项目，或align-items: stretch将align-items: center添加到右侧。

Answer 2

如果我理解得那么请试试。

   

 ul {
        position: relative;
        height: 200px;
    }
    
ul li.li4 {
       position: absolute;
       bottom: 0;
    }

<ul>
   <li>li1</li>
   <li>li3</li>
   <li>li2</li>
   <li class="li4">li4</li>
</ul>

感谢。

Answer 3

您可以将position:absolute提交给li4，将position:relative提供给ul。这将使li位置相对于ul，它将位于底部。

ul{
 height: 150px;
 position: relative;
}
#li4{
position: absolute;
bottom: 0;
}

<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li id="li4">li4</li>
</ul>

Answer 4

位置：固定;将始终显示li。
而是在您的代码中进行以下更改，即＆＃34; position：absolute＆＃34;给孩子李，＆＃34;职位：亲戚＆＃34;给亲李。

我在这里添加了代码段

＆＃13;

.sub-menu { display: none; }

#li4 { 
position: absolute;
bottom: 0;
}

.main-menu>li:hover  .sub-menu { 
  display: block;
  position: relative;
  height: 100px;
}

＆＃13;

<ul class="main-menu">
  <li>item1</li>
  <li>item2
  <ul class="sub-menu">
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
      <li id="li4">li4</li>
    </ul></li>
  <li>item3</li>
  <li>item4</li>
    
</ul>

＆＃13;

我创建了一个主菜单，其中包含4项（item1，item2，item3，item4），第二项（item2）包含一些子子项（li1，li2，li3，li4）。

将鼠标悬停在父li上将使孩子ul显示：＆＃34;显示：block＆＃34;这里最初是＆＃34;显示：无＆＃34;

Answer 5

＆＃13;

ul {
        position: relative;
        height: 200px;
        border : thin black solid;
        
    }
    
    ul li:last-child{
      position:absolute;
      bottom:0;
    }

＆＃13;

<ul>
   <li>li1</li>
   <li>li3</li>
   <li>li2</li>
   <li>li4</li>
</ul>

＆＃13;

这与您正在寻找的相同吗？

希望这有帮助。

Answer 6

只需使用固定底部

FuzzyLookupFactory

（这是Blazor）

将ul内部的li对齐到底部

6 个答案: