css - 如何在不超过尺寸的情况下达到最大尺寸？

Question

我正在尝试做 ，我只成功地做到了 .

这是 HTML 代码:

<div class="container">
    <ul class="list-green scoutcondensedregular">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="list-green scoutcondensedregular">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="list-green scoutcondensedregular">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="list-green scoutcondensedregular">
        <li></li>
        <li></li>
    </ul>
</div><!-- .container -->

CSS 代码:

.pairing-prosecco-wines .list-green li{
      background-repeat: no-repeat;
      padding: 28px 5% 30px 5%;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px;
      font-size: 30px;
      line-height: 22px;
      margin: 10px;
      background: #1fd57b;
      cursor: pointer; display:
      inline-block; zoom: 1;
      border: none;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #1fd57b;
}

.pairing-prosecco-wines ul {
  text-align:center;
}

我的问题是:您知道如何最大程度地扩展所有 li 以便它最大程度地填充空间吗？谢谢!

编辑:here是解决方案的 fiddle

Answer 1

您可以使用 display:table 或 display:flex;

表格布局示例:

.list-green {
   padding:0;
   margin:auto;
   display:table;
   width:100%;
   border-spacing:10px;
 }
 .list-green li {
   display:table-cell;
 }

flex 例子

 .list-green {
   padding:0;
   width:100%;
   margin:0 auto;
   display:flex;
   border-spacing:10px;
 }
 .list-green li {
flex:auto;/* or 1 */
 }