gpt4 book ai didi

html - CSS flex :column. 不占用父级的全宽

转载 作者:太空宇宙 更新时间:2023-11-04 10:39:45 25 4
gpt4 key购买 nike

我有一个带有列表项的垂直导航栏:

<ul class="nav">
<li>
<div>
<i class="fa fa-tachometer"></i>
<a href="#" class="noselect">Dashboard</a>
</div>
</li>
<li>
<div class="act_item">
<i class="fa fa-users"></i>
<a class="noselect">Groups</a>
<span class="arrow_right"></span>
</div>
</li>
<li>
<div>
<i class="fa fa-archive"></i>
<a class="noselect">Projects</a>
<span class="arrow_right"></span>
</div>
</li>
<li>
<div>
<i class="fa fa-cogs"></i>
<a class="noselect">Settings</a>
</div>
</li>
</ul>

CSS:

  .left .nav {
margin-top: 1em;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
position: relative; }
.left .nav li {
position: relative;
cursor: pointer;
background: #1879C7;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
border-top: 2px solid #4D5A63; }
.left .nav li:last-child {
border-bottom: 2px solid #303E47; }
.left .nav li:hover > div {
margin-left: 0.5em; }
.left .nav li div {
position: relative;
-moz-transition: all linear 0.2s;
-o-transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
transition: all linear 0.2s;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
height: 30px;
padding: 0.5em;
background: #243139; }
.left .nav li div i {
position: relative;
padding-top: 5px; }
.left .nav li div a {
position: inherit;
margin: auto 1em auto 0.5em;
font-size: 18px;
color: #F4F4F4; }
.left .nav li div .arrow_right {
margin: auto 0 auto auto; }
.left .nav li .act_item {
margin-left: 0.5em; }

Navigation bar

我希望能够添加额外的选项让我们说 Groups 所以我想将 .nav > li 作为 flex-direction: column ,但如果我尝试为此,内部的 div 不会占用父级的整个宽度 (li)。

我试图让子 div 具有 width:100%; 但它溢出了容器并且看不到箭头。

当列表为 flex-direction:column;

如何让子 div(在 .nav > li 内)填充父元素;.

最佳答案

我希望这就是您所追求的。您可以将宽度设置为 100%; 并使用 box-sizing: border-box; 以不打破内容。

我给它一个 border-left: 10px solid #1879C7,而不是事件项上的 margin-left,因为边距会破坏 框大小:边框框;

Mozilla Developer Network 阅读有关 box-sizing 属性的更多信息.请参阅下面的演示。

  .left .nav {
margin-top: 1em;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
position: relative;
}

.left .nav li {
position: relative;
cursor: pointer;
background: #1879C7;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
border-top: 2px solid #4D5A63;
}

.left .nav li:last-child {
border-bottom: 2px solid #303E47;
}

.left .nav li:hover > div {
margin-left: 0.5em;
}

.left .nav li div {
position: relative;
-moz-transition: all linear 0.2s;
-o-transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
transition: all linear 0.2s;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
height: 30px;
padding: 0.5em;
background: #243139;
width: 100%;
box-sizing: border-box;
}

.left .nav li div i {
position: relative;
padding-top: 5px;
}

.left .nav li div a {
position: inherit;
margin: auto 1em auto 0.5em;
font-size: 18px;
color: #F4F4F4;
}

.left .nav li div .arrow_right {
margin: auto 0 auto auto;
}

.left .nav li .act_item {
border-left: 10px solid #1879C7;
}
<div class="left">


<ul class="nav">
<li>
<div>
<i class="fa fa-tachometer"></i>
<a href="#" class="noselect">Dashboard</a>
</div>
</li>
<li>
<div class="act_item">
<i class="fa fa-users"></i>
<a class="noselect">Groups</a>
<span class="arrow_right"></span>
</div>
</li>
<li>
<div>
<i class="fa fa-archive"></i>
<a class="noselect">Projects</a>
<span class="arrow_right"></span>
</div>
</li>
<li>
<div>
<i class="fa fa-cogs"></i>
<a class="noselect">Settings</a>
</div>
</li>
</ul>

</div>

关于html - CSS flex :column. 不占用父级的全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35896827/

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