如何最大尺寸不超过尺寸？

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是解决方案的小提琴

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 example

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