Html 如何使按钮之间和侧面的边距相应地保持相同的大小？_Html_Css_Margin_Percentage_Responsive

Html 如何使按钮之间和侧面的边距相应地保持相同的大小？

html css

Html 如何使按钮之间和侧面的边距相应地保持相同的大小？,html,css,margin,percentage,responsive,Html,Css,Margin,Percentage,Responsive,当我减小窗口大小时，按钮之间的边距保持在相同的百分比，但我想减小按钮1的左边距，就像浏览器减小按钮4的右边距一样。因此，我们的目标是使按钮响应地定位在900px或更大 HTML代码： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"/> <

当我减小窗口大小时，按钮之间的边距保持在相同的百分比，但我想减小按钮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>

我不太明白你到底想要什么，但是

flexbox

可能是你的解决方案

我添加了

flex框：flex到按钮的容器。这将把它们放在一行中。

然后我添加了justify content:space-around。这将使所有子元素（按钮）在可用空间中均匀定位。

我还必须删除您在按钮上添加的任何边距。
我不太明白您到底想要什么，但是flexbox
可能是您的解决方案

我添加了flex框：flex到按钮的容器。这将把它们放在一行中。

然后我添加了justify content:space-around。这将使所有子元素（按钮）在可用空间中均匀定位。

我还必须删除你在按钮上加的任何空白。这就是我想要的，非常感谢，你帮了很多忙。这就是我想要的，非常感谢，你帮了很多忙。
.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;
}