为什么<button>元素没有在 H1 标记之后插入新行？

我的目标是将按钮标签放置在".col-1"容器。我已经尝试创建名为"hero-header"的新容器。在第一个里面并将其设置为显示:flex;没有工作，因为我不知道如何指定宽度没有元素转义出的容器。

使用align-self或align-items这样的属性不起作用，因为我没有指定高度。

我尝试过的一件事是设置"hero-header"但在我这样做之后，我的项目被推到左边，即使我使用了flexbox定位属性。

还有一件事，为什么我的ul元素在应用display: flex;而不是UL?

代码如下:

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
color: white;
font-family: sans-serif;
}
.col-1 {
padding-top: 0.7em;
padding-left: 10px;
padding-right: 10px;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url("/img/pexels-li-sun-2294361.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
}
a {
color: white;
}
h2 {
margin-left: 1.5em;
text-shadow: 1px 1px 5px black;
}
.navbar-brand {
color: orangered;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
ul {
display: flex;
padding: 20px;
list-style: none;
text-shadow: 3px 3px 20px black;
font-family: "Open Sans", sans-serif;
font-weight: 600;
}
h2 a {
text-decoration: none;
}
ul li a {
text-decoration: none;
padding-right: 2em;
}
.hero-header {
display: flex;
justify-content: center;
margin-top: 5em;
}
.hero-header h1 {
letter-spacing: 3px;
font-family: "Montserrat", sans-serif;
}
button {
width: 13%;
}

<!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">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<title>GymNyc</title>
</head>
<body>
<div class="col-1">
<nav>
<h2><a href="#index.html">Gym<span class="navbar-brand">Nyc</span></a></h2>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Classes</a></li>
<li><a href="#">Coaches</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
<div class="hero-header">
<h1>MAKE A CHANGE.</h1>
<button>sign up</button>
</div>
</div>
</body>
</html>

<div class="hero-header">
<h1>MAKE A CHANGE.</h1>
</div>
<center><button>sign up</button></center>
</div>

因为您将按钮放置在与h1相同的div中。你要这样放。它会很好地工作。你的元素为什么不能排成一条直线是因为font-size;的区别。虽然由于字体大小的不同，flex属性使它们在中间对齐，但看起来好像它们没有居中。

你需要在.hero-header类上使用这两个属性，它应该像你想要的那样工作;-)如果我理解正确的话:- d…

换行/在这种情况下，行/列

flex-direction: column;

垂直居中

align-items: center;

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
color: white;
font-family: sans-serif;
}
.col-1 {
padding-top: 0.7em;
padding-left: 10px;
padding-right: 10px;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url("/img/pexels-li-sun-2294361.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
}
a {
color: white;
}
h2 {
margin-left: 1.5em;
text-shadow: 1px 1px 5px black;
}
.navbar-brand {
color: orangered;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
ul {
display: flex;
padding: 20px;
list-style: none;
text-shadow: 3px 3px 20px black;
font-family: "Open Sans", sans-serif;
font-weight: 600;
}
h2 a {
text-decoration: none;
}
ul li a {
text-decoration: none;
padding-right: 2em;
}
.hero-header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 5em;
}
.hero-header h1 {
letter-spacing: 3px;
font-family: "Montserrat", sans-serif;
}
button {
width: 13%;
}

<!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">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<title>GymNyc</title>
</head>
<body>
<div class="col-1">
<nav>
<h2><a href="#index.html">Gym<span class="navbar-brand">Nyc</span></a></h2>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Classes</a></li>
<li><a href="#">Coaches</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
<div class="hero-header">
<h1>MAKE A CHANGE.</h1>
<button>sign up</button>
</div>
</div>
</body>
</html>

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
color: white;
font-family: sans-serif;
}
.col-1 {
padding-top: 0.7em;
padding-left: 10px;
padding-right: 10px;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url("/img/pexels-li-sun-2294361.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
}
a {
color: white;
}
h2 {
margin-left: 1.5em;
text-shadow: 1px 1px 5px black;
font-size: 15px;
}
.navbar-brand {
color: orangered;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul,h2 {
display: flex;
list-style: none;
text-shadow: 3px 3px 20px black;
font-family: "Open Sans", sans-serif;
font-weight: 600;
}
ul{
padding-top: 10px;
}
h2 a {
text-decoration: none;
font-size: 1em;
}
ul li a {
text-decoration: none;
padding-right: 2em;
}
.hero-header {
display: flex;
justify-content: center;
margin-top: 5em;
}
.hero-header h1 {
letter-spacing: 3px;
font-family: "Montserrat", sans-serif;
}
button {
width: 8rem;
font-size: 1em;
bottom: 13px;
position: relative;
right: 10px;
height: 40px;
}
@media only screen and (max-width:650px){
nav ul{
font-size: 10px;
}
h2{
position: relative;
bottom: 5px;
}
button{
width: 50px;
height: 30px;
bottom: 10px;
}
}

<!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">
<link rel="stylesheet" href="github.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<title>GymNyc</title>
</head>
<body>
<div class="col-1">
<nav>
<h2><a href="#index.html">Gym<span class="navbar-brand">Nyc</span></a></h2>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Classes</a></li>
<li><a href="#">Coaches</a></li>
<li><a href="#">Contact us</a></li>
<button>sign up</button>
</ul>
</nav>
<div class="hero-header">
<h1>MAKE A CHANGE.</h1>
</div>
</div>
</body>
</html>

我试图通过使用顶部和底部来对齐按钮和徽标和导航栏文本，并添加了一个媒体查询，以便在屏幕上具有较小宽度的视口可以调整自己。如果你想改变标志或按钮的位置，你可以改变顶部和底部的值，它会在你想要的地方对齐元素。在不同的屏幕上，页面会显示不同，这是因为字体大小。你可以调整它

相关内容

最新更新

热门标签：