將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對齊到底部

回答

相關問題