크기를 초과하지 않는 최대 크기는 어떻게됩니까?

Question

나는 을하려고하는데, 성공하는 것은 오직 입니다.

<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 코드 : 여기

는 HTML 코드입니다

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

내 질문은 : 당신이 그것을 채울 수 있도록 최대에 모든 리튬을 확장하는 방법을 알고 최대의 공간에서? 감사합니다.

편집 : 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; 
} 

플렉스 예를

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