为flexbox列表设置固定间距 [英] set fixed spacing for flexbox list
问题描述
我注意到在我的Firefox上，网站底部与链接列表（术语，关于...）之间的距离确实很大，我似乎无法弄清楚要用.ul样式指定的内容来进行调整间距。我正在使用Firefox。移动视图还可以，我还没有在手机上检查过，我只是用过devtools。
i noticed that on my firefox the distance between the bottom of the website and the list for links(terms,about...) is really large, i cannot seem to figure out what to specify in my .ul style to adjust the spacing. i am using firefox. The mobile view is okay, i haven't checked it on my phone, i just used devtools.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="css/navr.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<header>
<span class="iconify" data-inline="false" data-icon="eva:arrow-back-fill" style="color: #63ba86; font-size: 24px; padding-top: 10px;">
</span>
<h1>Forgot password</h1>
</header>
<div class="line"></div>
<h1 class="big">Change your password</h1>
<h1 class="cer">Confirm your email address</h1>
<form action="#" class="formstyle" style="padding-top:10px;padding-left: 10px">
<input type=" text " placeholder="Enter your email address" required>
<li class="btnn"><button type="submit" class="conf">Confirm</button></li>
</form>
<footer class="cl">
<div class="liner"></div>
<ul>
<li>
<a href="# " class="link ">Terms</a>
<a href="# ">Privacy</a>
<a href="# ">About</a>
</li>
</ul>
</footer>
</div>
</body>
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js "></script>
</html>
我的CSS
body {
background-color: #FFFFFF;
margin: 0;
}
@media screen and (max-width: 30em) {
.line {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
}
.liner {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
}
header {
display: flex;
}
h1.cer {
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 10px;
color: #356B51;
padding-left: 10px;
}
h1.big {
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 29px;
color: #63BA86;
padding-left: 10px;
}
h1 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #63BA86;
padding-left: 70px;
margin-top: 10px;
}
a {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #63BA86;
text-decoration: none;
margin: 4px;
}
ul {
display: flex;
justify-content: flex-end;
text-decoration: none;
list-style: none;
}
h2 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 29px;
color: #63BA86;
padding-left: 10px;
}
input {
width: 300px;
height: 35px;
border: 0.5px solid #63BA86;
border-radius: 5px;
font-family: Montserrat;
padding-left: 5px;
}
input:required {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
}
/* ::-webkit-input-placeholder {
text-align: center;
}
input::-moz-placeholder {
margin-left: 5px;
}
input:-moz-placeholder {
padding-left: 40px;
} */
button {
margin-top: 10px;
height: 25px;
width: 87px;
border: 0.5px solid #63BA86;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
button.conf {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 17px;
color: #FFFFFF;
background-color: #67E298;
}
footer.cl {
padding-top: 400px;
}
main {
flex: 1;
}
li.btnn {
list-style: none;
}
}
@media screen and (min-width: 30em) {
.line {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
}
header {
display: flex;
}
h1 {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #63BA86;
margin-top: 10px;
padding-left: 500px;
}
h1.cer {
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 10px;
color: #356B51;
padding-left: 460px;
}
h1.big {
font-style: normal;
font-weight: 500;
font-size: 40px;
line-height: 29px;
color: #63BA86;
padding-top: 200px;
padding-left: 450px;
}
li.btnn {
list-style: none;
display: block;
padding-left: 440px;
}
a {
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 17px;
color: #63BA86;
text-decoration: none;
margin: 1rem;
}
ul {
display: flex;
justify-content: flex-end;
text-decoration: none;
padding-left: 10rem;
list-style: none;
}
li {
text-align: left;
margin: 10px;
}
link {
margin: 10px;
font-size: large;
}
input {
width: 300px;
height: 35px;
border: 0.5px solid #63BA86;
border-radius: 5px;
font-family: Montserrat;
padding-left: 5px;
margin-left: 450px;
}
input:required {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
}
/* ::-webkit-input-placeholder {
text-align: center;
}
input::-moz-placeholder {
margin-left: 5px;
}
input:-moz-placeholder {
padding-left: 40px;
} */
button {
margin-top: 10px;
height: 25px;
width: 87px;
border: 0.5px solid #63BA86;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
button.conf {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 17px;
color: #FFFFFF;
background-color: #67E298;
}
.liner {
width: auto;
height: 0px;
border: 1px solid #E5E5E5;
margin-top: 40px;
}
}
推荐答案
我注意到在我的Firefox上，
网站底部与链接列表（术语，关于...）之间的距离确实很大
i noticed that on my firefox the distance between the bottom of the website and the list for links(terms,about...) is really large
这是您创建的网页的本质，因为内容只能达到该高度。为了使页脚元素停留在底部：我建议使用 Flexbox &将 margin-top：auto 设置为页脚。为了增加利润，只需为您的容器（在这种情况下为 .body ）提供 flex 显示财产与 100vh 的最小 height （这样就需要至少100％的视口高度）并分配列，因为它是弹性方向。这样，页脚便始终可以位于给定布局的底部。
This is the nature of the webpage you have created because the content only goes as far as that height. In order for your footer element to stay at the bottom: I recommend utilizing Flexbox & setting margin-top: auto to your footer. In order for the margin to kick in, simply give your container (in this case, .body) the flex display property & a minimum height of 100vh (so that it takes at least 100% of the viewport in terms of height) and assign column as it's flex-direction. This way, the footer can always stay at the bottom on your given layout.
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
footer.cl {
margin-top: auto;
}
这篇关于为flexbox列表设置固定间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
