gpt4 book ai didi

html - 尝试让我的
    使用 Flexbox 填充我的容器底部

转载 作者:行者123 更新时间:2023-12-04 04:08:27 25 4
gpt4 key购买 nike

完全是初学者。

我试图让我的导航栏列表项沿着导航容器的底部均匀分布。我正在尝试专门在 flexbox 中执行此操作。对齐内容:空格之间;是我一直在尝试的,但它似乎并不想玩游戏。

代码如下

关于如何使用 flexbox 实现这一点有什么想法吗?

感谢您花时间阅读本文

祝你有个美好的一天乔纳森

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */
margin: 0;
padding: 0;
}



body{

padding: 40px;
overflow-x: hidden; /* For Opera */

-webkit-box-shadow:
inset #19d4ff 0 0 0 5px,
inset #18cdf7 0 0 0 1px,
inset #53dfff 0 0 0 10px,
inset #50d8f7 0 0 0 11px,
inset #8ce9ff 0 0 0 16px,
inset #88e2f7 0 0 0 17px,
inset #c5f4ff 0 0 0 22px,
inset #bfecf7 0 0 0 23px;
-moz-box-shadow:
inset #19d4ff 0 0 0 5px,
inset #18cdf7 0 0 0 1px,
inset #53dfff 0 0 0 10px,
inset #50d8f7 0 0 0 11px,
inset #8ce9ff 0 0 0 16px,
inset #88e2f7 0 0 0 17px,
inset #c5f4ff 0 0 0 22px,
inset #bfecf7 0 0 0 23px;
box-shadow:
inset #19d4ff 0 0 0 5px,
inset #18cdf7 0 0 0 1px,
inset #53dfff 0 0 0 10px,
inset #50d8f7 0 0 0 11px,
inset #8ce9ff 0 0 0 16px,
inset #88e2f7 0 0 0 17px,
inset #c5f4ff 0 0 0 22px,
inset #bfecf7 0 0 0 23px;
font-family: 'Tenali Ramakrishna', sans-serif;
text-align: center;
}

header{
display: flex;
/*Lovely Gold*/
}

nav{
padding: 0;
background-color: #fcba03;

display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;


width: 100%; /*Nav is filling 100% of it's available container*/
}

#header-img{

}

#title{
font-size: 42px;
}


nav ul{

display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
justify-content: flex-start;
}

a, li {
display: flex;
justify-content: flex-start;
font-family: 'Tenali Ramakrishna', sans-serif;
font-weight: 400;
font-size: 32px;
text-decoration: none;
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

a:hover{
color: blue;
transform: scale(1.1);
}


@media screen and (max-width: 600px) {
.nav a {
float: none;
width: 100%;
}
}
<!doctype html>


<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>

<header id="header">

<nav id="nav-bar">

<img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">

<div id="title">
<h1> Vitamin D </h1>
</div>

<ul>
<li><a class="nav-link" href="#video">Video</a></li>
<li><a class="nav-link" href="#benefits">Benefits</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>

</ul>
</nav>

</header>

最佳答案

这是因为 ul 通常会根据其内部元素框的大小占用空间。所以它的最大 width 将是其 li 的总和 width。要让它工作,您应该指定它的 width 以让它知道它应该填充多少空间。

所以只需将 width: 100%; 添加到您的样式表中,如下所示:

nav ul {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
justify-content: space-between;
width: 100%;
}

那么你的最终代码应该是这样的:

@import url("https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap");

/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* {
/*Hugs border to edges of screen */
margin: 0;
padding: 0;
}

body {
padding: 40px;
overflow-x: hidden;
/* For Opera */
-webkit-box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px;
-moz-box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px;
box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px;
font-family: "Tenali Ramakrishna", sans-serif;
text-align: center;
}

header {
display: flex;
/*Lovely Gold*/
}

nav {
padding: 0;
background-color: #fcba03;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
width: 100%;
/*Nav is filling 100% of it's available container*/
}

#header-img {}

#title {
font-size: 42px;
}

nav ul {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
justify-content: space-between;
width: 100%;
}

a,
li {
display: flex;
justify-content: flex-start;
font-family: "Tenali Ramakrishna", sans-serif;
font-weight: 400;
font-size: 32px;
text-decoration: none;
}


/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

a:hover {
color: blue;
transform: scale(1.1);
}

@media screen and (max-width: 600px) {
.nav a {
float: none;
width: 100%;
}
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<body>

<header id="header">

<nav id="nav-bar">

<img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">

<div id="title">
<h1> Vitamin D </h1>
</div>

<ul>
<li><a class="nav-link" href="#video">Video</a></li>
<li><a class="nav-link" href="#benefits">Benefits</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>

</ul>
</nav>

</header>

关于html - 尝试让我的 <ul> 使用 Flexbox 填充我的容器底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62150631/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com