버튼과 측면 사이의 여백을 정확히 일치시키는 방법은 무엇입니까?

창 크기를 줄이면 단추 사이의 여백은 같은 비율로 유지되지만 브라우저의 button4 오른쪽 여백 크기가 줄어들 기 때문에 button1의 왼쪽 여백을 줄이려고합니다. 따라서 목표는 버튼을 반응 형으로 900px 이상으로 배치하는 것입니다.버튼과 측면 사이의 여백을 정확히 일치시키는 방법은 무엇입니까?

HTML 코드 :

<!DOCTYPE HTML> 
<html> 
<head> 

    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

</head> 

<body> 
<div class="container" 
    <div class="games"> 
      <article class="games-fluid-left" id="tic-tac-toe"> 
       <!--játékok képei--> 
       <p>poker</p> 
       <div class="gamebuttons-container"> 
        <p><a>button1</a></p> 
        <p><a>button2</a></p> 
        <p><a>button3</a></p> 
        <p><a>button4</a></p> 
       </div> 
      </article> 

      <article class="games-fluid-right" id="chess"> 
       <!--játékok képei--> 
       <p>fortuna</p> 
       <div class="gamebuttons-container"> 
        <p><a>button1</a></p> 
        <p><a>button2</a></p> 
        <p><a>button3</a></p> 
        <p><a>button4</a></p> 
       </div> 
      </div> 
      </article> 
</div> 

</body>

CSS 코드 :

.container{ 
    max-width:1100px; 
    height:1500px; 
    margin:0px auto; 
    border:1px solid navy; 
} 

.games { 
    max-width:calc(100% - 169px); 
    height: 700px; 
    position:relative; 
    border:1px solid black; 
} 

.games-fluid-left { 
    display:inline-block; 
    width:calc(46.75% - 30px); 
    height: 270px; 
    border: 1px solid black; 
    border-radius: 5px; 
    position:relative; 
    float:left; 
    margin-left:4.3%; 
    margin-top:35.5px; 
} 

.games-fluid-right { 
    display:inline-block; 
    width:calc(46.75% - 30px); 
    height: 270px; 
    border: 1px solid black; 
    border-radius: 5px; 
    position:relative; 
    float:left; 
    margin-left:35.5px; 
    margin-top:35.5px; 
} 

.games-fluid-right p , .games-fluid-left p{ 
    text-align: center; 
    font-size: 20px; 
    color:black; 
} 

.gamebuttons-container{ 
    position:relative; 
    height:50px; 
    max-width:100%; 
    margin:175px auto; 
    border:1px solid red; 
} 

.gamebuttons-container a { 
    float:left; 
    padding: 8px; 
    margin-left:7%; 
    font-size:14px; 
    border: 1px solid black; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    border-radius:5px; 
    width:60px; 
    background-color:black; 
    color:white; 
}

출처

2017-02-09 Looz

난 정말 당신이 정확하게 원하는 것을 이해하지 않지만, flexbox은 당신의 솔루션이 될 수 있습니다.

https://jsfiddle.net/PaulvdDool/ttpfryq6/

나는 버튼의 컨테이너에 flex-box: flex;을 추가했다. 그러면 한 줄에 표시됩니다.
그런 다음 justify-content: space-around;을 추가했습니다. 이렇게하면 모든 하위 요소 (버튼)가 사용 가능한 공간에 고르게 배치됩니다.
단추에 넣은 여백도 제거해야했습니다.

출처

2017-02-09 22:41:55

잘 작동합니다. flex에는 호환성 문제 IE9,10이 있습니다. http://caniuse.com/#feat=flexbox –

그게 전부였습니다. 정말 고마워요. 많이 도움이되었습니다. – Looz

버튼과 측면 사이의 여백을 정확히 일치시키는 방법은 무엇입니까?

답변

관련 문제