Question

当我减小窗口大小时，按钮之间的边距保持相同的百分比，但我想减少按钮1的左边距，浏览器减小右边距的大小。将Button4。因此，目标是使按钮响应地定位在900px和更大。

HTML code：

<!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;。这使得所有子元素（按钮）在可用空间中均匀定位我还必须删除你在按钮上放置的任何边距。

如何使按钮和侧面之间的边距响应相同？

1 个答案: