どのように応答マージンボタンの間および両側に同じサイズを作るには？私は、ウィンドウのサイズを小さくすると

、ボタンの間のマージンが同じパーセントにとどまるが、私はボタン1の左マージンを減らしたい、できるだけ多くのブラウザは、ボタン4の右余白のサイズが小さくなります。だから、目標は、応答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;を追加しました。これにより、1行になります。
は、その後、私はjustify-content: space-around;を追加しました。これにより、すべての子要素（ボタン）が利用可能な領域に均等に配置されます。
私はまた、あなたがボタンの上に置かれた任意の余白を削除する必要がありました。

出典

2017-02-09 22:41:55

罰金、フレックスは、互換性の問題がありIE9,10 http://caniuse.com/#feat=flexbox –

は私が欲しかったもの厥作品、uはたくさん助け、ありがとうございました。 – Looz

どのように応答マージンボタンの間および両側に同じサイズを作るには？私は、ウィンドウのサイズを小さくすると

答えて

関連する問題