列表项中多个按钮的底部定位

Question

我需要创建一个列表项结构，其中包含从底部开始的三个按钮。将这些按钮放置在图片中需要哪些样式（按钮顺序无关紧要，我只想将底部的3个按钮放在上面）。

以下是我的CSS和HTML。

li{ 
 
    border: 1px solid #ddd; 
 
    padding: 10px; 
 
    height: 200px; 
 
    overflow: hidden!important; 
 
    text-align:center; 
 
} 
 

 
.btn-custom{ 
 
    
 
}

<ul> 
 
    <li> 
 
     <button type="button" class="btn-custom">Button-3</button> 
 
     <button type="button" class="btn-custom">Button-2</button> 
 
     <button type="button" class="btn-custom">Button-1</button> 
 
    </li> 
 
</ul>

Answer 1

类似的东西？

li{ 
 
    border: 1px solid #ddd; 
 
    padding: 10px; 
 
    height: 200px; 
 
    overflow: hidden!important; 
 
    text-align:center; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
}

<ul> 
 
    <li> 
 
     <button type="button" class="btn-custom">Button-3</button> 
 
     <button type="button" class="btn-custom">Button-2</button> 
 
     <button type="button" class="btn-custom">Button-1</button> 
 
    </li> 
 
</ul>

更多关于Flexbox的here信息，包括浏览器的支持。

Answer 2

您将需要使用display: table-cell能够垂直对齐内容

ul { 
 
    list-style: none; 
 
} 
 
ul li { 
 
    border: 1px solid #ddd; 
 
    display: table-cell; 
 
    height: 200px; 
 
    padding: 10px 25px; 
 
    vertical-align: bottom; 
 
} 
 

 
.btn-custom{ 
 
    display: block; 
 
    margin-top: 5px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<ul> 
 
    <li> 
 
    <button type="button" class="btn-custom">Button-3</button> 
 
    <button type="button" class="btn-custom">Button-2</button> 
 
    <button type="button" class="btn-custom">Button-1</button> 
 
    </li> 
 
</ul>