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

Question

我需要创建一个列表项结构，其中包含从底部开始的三个按钮。如图所示放置这些按钮需要哪些样式（按钮顺序并不重要，我只想在底部放置3个按钮）。

下面是我的CSS和HTML。

＆＃13;

＆＃13;

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

.btn-custom{
 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

那样的东西？

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的更多信息，包括浏览器支持。