网站按钮无法横向排列，寻求解决方案及代码模板

问题原因 #

当前每个按钮被独立的<div>包裹，块级元素默认独占一行，导致按钮上下堆叠显示。

修改方案 #

1. 添加统一容器包裹所有按钮，通过Flexbox实现横向排列、自动换行和间距控制。
2. 调整容器布局样式，确保整体居中，同时保留按钮原有渐变动画效果。

修改后的完整代码 #

HTML 代码

<!DOCTYPE html>
<html>
<head>
    <title>techguyaj24's GameVerse!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 统一容器包裹所有按钮 -->
    <div class="button-container">
        <a href="https://games.techguyaj22.rf.gd/doge-miner">
            <button>
                <div>
                    <img src="https://games.techguyaj22.rf.gd/img/doge-miner-cover.png">
                </div>
            </button>    
        </a>
        <a href="https://games.techguyaj22.rf.gd/doge-miner">
            <button>
                <div>
                    <img src="https://games.techguyaj22.rf.gd/img/doge-miner-cover.png">
                </div>
            </button>    
        </a>
        <!-- 新增按钮直接添加到这个容器内即可自动排列 -->
    </div>
</body>
</html>

CSS 代码

/* 渐变旋转核心属性（部分浏览器不支持，可参考caniuse兼容性） */
@property --border-angle-1 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

@property --border-angle-2 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 90deg;
}

@property --border-angle-3 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 180deg;
}

/* sRGB 颜色变量 */
:root {
    --bright-blue: rgb(0, 100, 255);
    --bright-green: rgb(0, 255, 0);
    --bright-red: rgb(255, 0, 0);
    --background: black;
    --foreground: white;
    --border-size: 2px;
    --border-radius: 0.75em;
    --button-gap: 1.5em; /* 按钮间距变量，方便统一调整 */
}

/* 支持Display-P3颜色时的变量替换 */
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --bright-blue: color(display-p3 0 0.2 1);
        --bright-green: color(display-p3 0.4 1 0);
        --bright-red: color(display-p3 1 0 0);
    }
}

/* 渐变旋转动画 */
@keyframes rotateBackground {
    to { --border-angle-1: 360deg; }
}

@keyframes rotateBackground2 {
    to { --border-angle-2: -270deg; }
}

@keyframes rotateBackground3 {
    to { --border-angle-3: 540deg; }
}

body {
    background: var(--background);
    color: var(--foreground);
    min-height: 100dvh;
    display: grid;
    place-content: center;
    margin: 0;
    padding: 1em; /* 添加内边距，避免按钮贴边 */
    font-family: "Aspekta";
}

/* 按钮容器核心布局样式 */
.button-container {
    display: flex;
    flex-wrap: wrap; /* 超出容器宽度自动换行 */
    gap: var(--button-gap); /* 按钮间的间距 */
    justify-content: center; /* 按钮在容器内居中对齐 */
    max-width: 100%; /* 容器宽度不超出页面范围 */
}

button {
    --border-angle-1: 0deg;
    --border-angle-2: 90deg;
    --border-angle-3: 180deg;
    color: inherit;
    font-size: calc(0.8rem + 4vmin);
    font-family: inherit;
    border: 0;
    padding: var(--border-size);
    display: flex;
    width: max-content;
    border-radius: var(--border-radius);
    background-color: transparent;
    background-image: conic-gradient(
            from var(--border-angle-1) at 10% 15%,
            transparent,
            var(--bright-blue) 10%,
            transparent 30%,
            transparent
        ),
        conic-gradient(
            from var(--border-angle-2) at 70% 60%,
            transparent,
            var(--bright-green) 10%,
            transparent 60%,
            transparent
        ),
        conic-gradient(
            from var(--border-angle-3) at 50% 20%,
            transparent,
            var(--bright-red) 10%,
            transparent 50%,
            transparent
        );
    animation: 
        rotateBackground 3s linear infinite,
        rotateBackground2 8s linear infinite,
        rotateBackground3 13s linear infinite;
}

/* 按钮内部背景（设为transparent可查看渐变边框效果） */
button div {
    background: var(--background); 
    padding: 1em 1.5em;
    border-radius: calc(var(--border-radius) - var(--border-size));
    color: var(--foreground);
}

@font-face {
    font-family: "Aspekta";
    font-weight: normal;
    src: url("https://assets.codepen.io/240751/Aspekta-300.woff2") format("woff2");
}

效果说明 #

• 按钮横向并排显示，超出页面宽度时自动换行到下一行。
• 通过--button-gap变量可快速统一调整按钮间的间距。
• 新增按钮只需添加到button-container容器内，即可自动参与布局。

内容的提问来源于stack exchange，提问作者Abdul-Jabbar Suleiman