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

最佳答案

我不太清楚您到底想要什么,但是flexbox可能是您的解决方案。

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

我在按钮的容器中添加了flex-box: flex;。这会将它们放在一行中。
然后我添加了justify-content: space-around;。这使所有子元素(按钮)在可用空间中均匀地定位自己。
我还必须删除按钮上的所有边距。

10-05 20:47
查看更多