我的代码如下: 当你运行它的时候，按钮就在另一个下面. 有没有一种方法可以让他们并排走，让他们之间有空间？ 有人能帮我做吗，像一个模板？ 而且，当一个新的行开始时，它不会离开页面，而是在按钮下面. 谢谢你能帮助我解决这个问题的人.
/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
@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 color. */
: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;
}
/* Display-P3 color, when supported. */
@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;
font-family: "Aspekta";
}
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;
}
/* Change this background to transparent to see how the gradient works */
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");
}<!DOCTYPE html>
<html>
<head>
<title>techguyaj24's GameVerse!</title>
<link rel="stylesheet" href="https://games.techguyaj22.rf.gd/css/style.css">
</head>
<body>
<div>
<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>
<div>
<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>