부동 단추 집합에서 여백 제거

Question

페이지에 지정된 너비의 컨테이너가 있습니다. 이렇게하면 페이지의 모든 버튼을 가운데에 맞출 수 있습니다.

버튼에 margin-right을 사용하고 있지만 버튼이있는 컨테이너를 채울 수 없으므로 컨테이너와 가장자리가 맞지 않게됩니다. 그렇지 않으면 격자가 다시 조정되고 격자가 3x4가됩니다. 원하는 4x3.

그래서 어떻게하면 단추 끝에 공간 (여백)을 없앨 수 있습니까? 분명히 :last-child 셀렉터를 사용할 수 없습니다.

<div id="container"> 
    <div id="months"> 
     <div class="month-button jan" data-month="January"></div> 
     <div class="month-button feb" data-month="February"></div> 
     <div class="month-button mar" data-month="March"></div> 
     <div class="month-button apr" data-month="April"></div> 

     <div class="month-button may" data-month="May"></div> 
     <div class="month-button jun" data-month="June"></div> 
     <div class="month-button jul" data-month="July"></div> 
     <div class="month-button aug" data-month="August"></div> 

     <div class="month-button sep" data-month="September"></div> 
     <div class="month-button oct" data-month="October"></div> 
     <div class="month-button nov" data-month="November"></div> 
     <div class="month-button dec" data-month="December"></div> 
    </div> 
</div> 

CSS의 :

#container { 
    width: 900px; 
    margin: 10px auto; 
} 

#months { 
    margin: 10px 5px 21px; 

    float: left; 
} 

.month-button { 
    width: 115px; 
    height: 26px; 

    background: url("/__resources/images/months.png"); 
    cursor: pointer; 
    float: left; 
    margin: 8px 87px 0px 0px; 
} 

Answer 1

당신은 모든 4 요소의 오른쪽 여백 0으로 nth-child을 사용할 수 있습니다

: 당신은 오래된 브라우저를 지원해야하는 경우

.month-button:nth-child(4n) { 
    margin-right:0; 
} 

과 같은 모든 네 번째 요소에 클래스를 수동으로 추가하는 것이 좋습니다.:

.zero-right-margin { 
    margin-right:0; 
} 

Answer 2

다음과 같은 것을 사용하십시오.

#months{ /* This is the wrapper of your buttons */ 
    margin-right: -87px; /* Negative of buttons right margin */ 
} 

Answer 3

위에서 언급 한 IE8을 지원하는 경우, 각 행을 자체 컨테이너에 분리하는 것이 가장 좋습니다.

IE8은 :nth-child 또는 :last-child을 지원하지 않지만 [:first-child][1] 의사 클래스를 지원합니다. 여백을 오른쪽 대신 왼쪽에 놓은 다음 [:first-child][2]을 사용하여 첫 번째 어커런스에서만 여백을 제거 할 수 있습니다.

HTML :

<div id="container"> 
    <div id="months"> 
     <div class="row"> 
      <div class="month-button jan" data-month="January"></div> 
      <div class="month-button feb" data-month="February"></div> 
      <div class="month-button mar" data-month="March"></div> 
      <div class="month-button apr" data-month="April"></div> 
     </div> 
     <div class="row"> 
      <div class="month-button may" data-month="May"></div> 
      <div class="month-button jun" data-month="June"></div> 
      <div class="month-button jul" data-month="July"></div> 
      <div class="month-button aug" data-month="August"></div> 
     </div> 
     <div class="row"> 
      <div class="month-button sep" data-month="September"></div> 
      <div class="month-button oct" data-month="October"></div> 
      <div class="month-button nov" data-month="November"></div> 
      <div class="month-button dec" data-month="December"></div> 
     </div> 
    </div> 
</div> 

CSS :

.month-button { 
    width: 115px; 
    height: 26px; 

    background: url("/__resources/images/months.png"); 
    cursor: pointer; 
    float: left; 
    margin: 8px 0px 0px 87px; 
} 
.month-button:first-child { 
    margin-left: 0; 
}