我有一个列表(ul),其中每个项目(li)包含一个图标和一个文本范围。该列表嵌套在一个容器内,该容器可能没有足够的宽度来容纳它。这是代码
<div class="root">
<div class="container">
<ul class="list-container">
<li>
<img class="icon" src="https://jsfiddle.net/img/favicon.png" />
<span>Hello World !!!</span></li>
<li>
<div class="icon"></div><span>JavaScript</span>
</li>
<li>
<div class="icon"></div>
<span>Rust</span>
</li>
</ul>
</div>
</div>
* {
border: 0px;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.root {
display: flex;
justify-content: center;
}
.list-container {
border: 1px solid black;
padding: 24px;
list-style:none;
display: flex;
flex-direction: column;
}
.list-container li {
border: 1px solid green;
margin-top: 10px;
white-space: nowrap;
display: flex;
align-items: center;
}
.icon {
background: green;
width: 16px;
height: 16px;
max-width: 100%;
margin-right: 14px;
}
.list-container li:first-child {
margin-top: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
width: 50px;
}
如果“div”容器的宽度比“ul”窄,则会出现奇怪的行为。当图标是最大宽度为 100% 的“img”时,跨度内的文本会超出“li”的边界。但是,如果“img”缺少最大宽度设置或用“div”替换,则“li”成功容纳图标和跨度的完整宽度。结果可以在这里检查(https://jsfiddle.net/c508dz6o/1/)
我知道我可以使用自定义列表标记或其他方式获得相同的结果。然而,我真的很想了解导致图像最大宽度出现这种行为的 CSS 规则。谁能帮我解决这个问题吗?
只需删除 max-width 并保留 width:16px;在你的 .icon 中,它们的行为是相同的(没有溢出)。请记住您的小提琴图像初始大小设置为 32px
* {
border: 0px;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.root {
display: flex;
justify-content: center;
}
.list-container {
border: 1px solid black;
padding: 24px;
list-style:none;
display: flex;
flex-direction: column;
}
.list-container li {
border: 1px solid green;
margin-top: 10px;
white-space: nowrap;
display: flex;
align-items: center;
}
.icon {
background: green;
width: 16px;
height: 16px;
margin-right: 14px;
}
.list-container li:first-child {
margin-top: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
width: 50px;
}
<div class="root">
<div class="container">
<ul class="list-container">
<li>
<img class="icon" src="https://jsfiddle.net/img/favicon.png"/>
<span>Hello World !!!</span></li>
<li>
<div class="icon"></div><span>JavaScript</span>
</li>
<li>
<div class="icon"></div>
<span>Rust</span>
</li>
</ul>
</div>
</div>