将ul对齐到底部

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

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

我该怎么做？

我曾尝试：

li4 { 
    position: fixed; 
    bottom: 0; 
}

该移动li4底部。然而，由于ul是一个隐藏菜单里面，li4会出现，即使我关闭菜单（这不是我想要的），因为position: fixed

来源

2017-08-02 Sam Kah Chiin

li1 li2 li3 li4你需要这个。 –

您可以使用Flexbox将实现这一目标。演示：

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-startul如果你不想做li占据所有的容器宽度拉伸（默认align-items: stretch）。

此外，您可以将align-items: center添加到中心弹性项目或align-items: flex-end移动li的权利。

来源

2017-08-02 04:58:50

简单而且非常有效，很好的使用flex！ –

如果我理解正确，那么请试试这个。


 

 
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>

感谢。

来源

2017-08-02 04:59:51 Rohan

嗨@Rohan，你好吗？如果你把代码片段放在一起会很好。 –

Hi @ShaunakShukla，我很好。请检查此代码段：https://jsfiddle.net/Rohanatfiddle/7wt26rr4/ – Rohan

Bhura，编辑答案！并尝试将这种类型的片段放在你的答案中！你会得到更多的积分！诚然！ ;） –

你可以给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>

来源

2017-08-02 05:00:10 Dij

这里是您的解决方案。

您可以使用position: absolute;为您的最后一个孩子，并position: relative;父因此它将保持child.If 隐藏父的孩子也将隐藏。

提示：position: fixed;是相关页面不是元素的父。如果您想要使用父处理子女，请使用position: absolute;。希望它可以帮助你。

ul { 
 
    display: inline-block; 
 
    height: 150px; 
 
    position: relative; 
 
    background: black; 
 
    width: 50%; 
 
    padding: 0px; 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
    background: gray; 
 
    width: 100%; 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
ul li:last-child { 
 
    position: absolute; 
 
    bottom: 0; 
 
}

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

来源

2017-08-02 05:04:43 weBBer

位置是：固定;将永远显示那个李。
而是在您的代码中进行以下更改即，对李丽的“位置：绝对”，对李丽的“位置：亲属”。

我加入这里的片段

.sub-menu { display: none; } 
 

 
#li4 { 
 
position: absolute; 
 
bottom: 0; 
 
} 
 

 
.main-menu>li:hover .sub-menu { 
 
    display: block; 
 
    position: relative; 
 
    height: 100px; 
 
}

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

我创建了一个主菜单，其中有4个项目（项目1，项目2，项目3，ITEM4），和第2项（ITEM2）被有一些子项目（li1，li2，li3，li4）。

徘徊父李会使孩子UL到：这是最初“显示块”这里“显示：无”

来源

2017-08-02 05:33:38

@sam kah chiin接受答案，如果它回答或尝试解释你需要的任何额外的变化... –

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

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

这是相同的，你正在寻找对于？

希望这会有所帮助。

来源

2017-08-02 06:32:22

将ul对齐到底部

回答

相关问题