정렬 세 개의 버튼 가로

Question

지저분한 HTML 코드/마크 미안

/*-----------download buttons------------------------*/ 
.download-button-wrapper{ 
    *zoom: 1; 
    float: left; 
    width: 180px; 
    position: relative; 
    border: 1px solid #eaedf1; 
    color: #9ea7b3; 
    background-color: #F9FAFC; 
    text-align: center; 
    line-height: 44px; 
    font-size: .8em; 
    margin: 15px 12.700534759358288770053475935829% 0 0; 
} 
.download-buttons div:nth-child(3){ 
    float: right; 
    margin-right: 0; 
} 

/* -----------GLOBALS - Dropdowns---------------*/ 
.downloadFontIcons{ 
    cursor: pointer; 
    outline: none; 
} 

/*----------actual dropdown list----------------*/ 
.downloadFontIcons .dropdown{ 
    /* Size & position */ 
    position: absolute; 
    top: 110%; 
    left: 0px; 
    right: 0px; 

    /* Hiding */ 
    opacity: 0; 
    pointer-events: none; 
} 

/*-------Media Queries---------*/ 
    @media only screen 
      and (max-width : 1000px) { 
      #wallpaper-wrapper{ 
       margin-left: 1.0416666666666666666666666666667%; /* 10px/960px */ 
       margin-right: 1.0416666666666666666666666666667%; /* 10px/960px */ 
      } 
    } 
    @media only screen 
      and (max-width : 820px) { 
      .download-button-wrapper{ 
       margin: 15px 10.700534759358288770053475935829% 0 0; 
      } 
    } 

update Fiddle

우선

<div class="download-buttons"> 
       <div class="download-button-wrapper"> 
        <div id="dd" class="desktopBackground downloadFontIcons" tabindex="1">DESKTOP 
         <ul class="dropdown"> 
          <li><a href="#">2560 x 1440</a></li> 
          <li><a href="#">1800 x 900</a></li> 
         </ul> 
        </div> 
       </div> 
       <div class="download-button-wrapper"> 
        <div id="de" class="tabletBackground downloadFontIcons" tabindex="1">PHONE 
         <ul class="dropdown"> 
          <li><a href="#">640 x 960</a></li> 
          <li><a href="#">1136 x 640</a></li> 
          <li><a href="#">720 x 1280</a></li> 
         </ul> 
        </div> 
       </div> 
       <div class="download-button-wrapper"> 
        <div id="df" class="phoneBackground downloadFontIcons" tabindex="1">TABLET 
         <ul class="dropdown"> 
          <li><a href="#">2560 x 1600</a></li> 
          <li><a href="#">2048 x 1536</a></li> 
         </ul> 
        </div> 
       </div> 
      <div style="clear:both"></div> 
     </div> 

CSS (우측, 중앙 왼쪽). 하지만 여기 내 문제는 내 버튼의 정렬입니다. 나는 그들을 (왼쪽, 센터, 오른쪽)에 따라 적절하게 정렬 할 수 없으며 현재는이를 달성하기 위해 수레를 사용하고 있지만 두 개의 버튼에 % 마진을 사용하더라도 윈도우의 크기를 조정하면 마지막 요소가 아래로 떨어집니다 . 이것을 달성하는 다른 방법은 없습니까? 버튼을 왼쪽, 가운데, 오른쪽으로 정렬하고 동시에 반응하도록합니다.

Answer 1

margin: auto을 각 버튼에 설정할 수 있습니다. 그래도 문제가 해결되지 않으면

, 당신은 당신의 CSS에

.download-buttons { 
    display: flex; 
    display: ms-flex; 
    display: -webkit-flex; 
{ 

를 추가 할 수 있습니다. 그것은 jsfiddle에서 작동하는 것으로 보입니다.