我对HTML和CSS有点陌生，所以我决定尝试创建一个新网站。我几乎完成了，但我唯一的问题是按钮在一列而不是一行，每当我试图以不同的屏幕大小查看网站时，文本都会部分离开屏幕。我尝试过使用float来解决按钮问题，但我似乎不了解实际功能和如何使用它。我也不知道如何修复缩放部分。任何解决方案和解释都会非常有帮助。提前感谢！
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
min-height: 100vh;
background: #782F40;
transition: 3s;
}
h1{
color: white;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
}
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.title{
font-size: 130px;
color: #FAF9F6;
font-weight: 700;
}
.subtitle{
color: white;
font-size: 80px;
}
button{
margin:7px auto;
display:block;
background-color: transparent;
color: #FAF9F6;
width: 70px;
height: 70px;
border: 5px solid white;
font-size: 25px;
border-radius: 50px;
transition: transform .6s;
overflow: hidden;
}
button:hover{
color:white;
cursor: pointer;
transform: scale(1.03);
}
#particles-js{
width: 100%;
height: 100%;
background-color: transparent;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="expires" content="timestamp">
<title>Julian Sanchez</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/4ce3863cee.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>
<span class="title">Julian Sanchez</span><br>
<span class="subtitle">CS @ FSU</span>
</h1>
</div>
<div class="btn-group">
<form>
<button type="submit" formaction="https://www.google.com/">
<i class="fa-brands fa-linkedin"></i></button></form>
<form>
<button type="submit" formaction="https://www.google.com/>
<i class="fa-brands fa-linkedin"></i></button></form>
</div>
</div>
</body>
</html>学习flexbox，它会让你的生活变得更轻松。此外，按钮不需要表单标签。
<div class="btn-group" style="display: flex; flex-direction:column" >
<button type="submit" formaction="https://www.google.com/">
<i class="fa-brands fa-linkedin"></i></button>
<button type="submit" formaction="https://www.google.com/">
<i class="fa-brands fa-linkedin"></i></button>
</div>
希望它有效<3
将其添加到您的css 中
form {
display: inline-block;
}
我也是HTML的新手，但我认为您可以尝试将按钮的显示属性从块更改为内联