如何使按钮和两侧的边距响应大小相同？

Question

当我减小 window 的大小时，按钮之间的边距保持在相同的百分比，但我想减小 button1 的左边距，因为浏览器会减小右边的尺寸- button4 的边距。所以我们的目标是让按钮响应地定位在 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;
}

Answer 1

我不太明白你到底想要什么，但 flexbox 可能是你的解决方案。

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

我将 flex-box: flex; 添加到按钮的容器中。这会将它们排成一行。
然后我添加了justify-content: space-around;。这使得所有子元素（按钮）在可用 space.
中均匀定位我还必须删除您在按钮上放置的任何边距。

如何使按钮和两侧的边距响应大小相同？

How to make the margin responsively the same size between the buttons and on the sides?

html

css

margin

percentage

responsive