gpt4 book ai didi

html - css - flexbox 不包含其子元素

转载 作者:行者123 更新时间:2023-11-28 02:53:10 25 4
gpt4 key购买 nike

<分区>

我在列表项中有一个容器,它有一个 flex 显示。当这个容器里面的内容也是 display flex 时,容器会调整到内容的大小,而不是内容溢出。列表元素如下所示。

如果标签太长,列表项会相应地调整大小,而不是让标签溢出。

#div {
width: 300px;
border: 1px solid red;
}

#userimage {
width: 20px;
height: 20px;
border: 1px solid red;
}

#usertag {
display: flex;
}

#inner {}

#outer {
display: flex;
}

ul {
list-style-type: none;
}

p {
margin: 0;
text-overflow: ellipsis;
overflow: hidden;
}
<div id="div">
<ul>
<li>
<div id="outer">
<div id="inner">
<input type="checkbox" id="checkbox" />
</div>
<div id="usertag">
<div id="userimage">
</div>
<p>
<label>1</label>
</p>
</div>
</div>
</li>
<li>
<div id="outer">
<div id="inner">
<input type="checkbox" id="checkbox" />
</div>
<div id="usertag">
<div id="userimage">

</div>
<p>
<label>12312312312451232e524t230t923t8rq0w9t8q0w9er</label>
</p>
</div>
</div>
</li>
</ul>
</div>

第二个列表项已根据此处标签的大小调整了大小。我希望文本显示省略号。当我更改外部 div 的显示时会发生这种情况。但是对齐被搞砸了。

这就是 flex display 的工作原理吗?还是我做错了什么?

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