问题描述
我正在尝试创建无序的书籍清单。它们应具有固定的宽度。由于某种原因,每次我向其中添加overflow: hidden;
时,固定宽度均不起作用。
我可以在devtools中看到样式已应用于列表项,但不是我设置的宽度。有人可以指出错误吗?
ul.sideul {
display: inline-flex;
float: left;
position: absolute;
top: 170px;
left: 0;
height: auto;
width: 360px;
padding: 0;
margin: 0;
overflow-x: auto;
overflow-y: hidden;
}
ul.sideul li {
float: left;
list-style: none;
position: relative;
width: 238px;
height: 277px;
border-radius: 0px 20px 20px 0px;
background: #fff;
Box-shadow: 10px 10px 10px rgba(0,0.16);
margin: 0 20px;
padding-top: 49px;
--bookmark: #A68AF5;
}
<ul class="sideul">
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="19.28" height="30.849" viewBox="0 0 19.28 30.849">
<path
class="a"
d="M8.355,1.928V32.777l9.64-9.64,9.64,9.64V1.928Z"
transform="translate(-8.355 -1.928)"
/>
</svg>
<p class="head">Notes for Work. Going Home.</p>
<p class="body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam,nam! Lorem lorem ipsum dolor sit amet ipsum dolor sit amet
</p>
<p class="end">8 min Read</p>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="19.28" height="30.849" viewBox="0 0 19.28 30.849">
<path
class="a"
d="M8.355,nam! Lorem lorem ipsum dolor sit amet ipsum dolor sit amet
</p>
<p class="end">8 min Read</p>
</li>
</ul>
解决方法
解决方案是添加
ul li{
flex-shrink: 0;
}
正如教父在评论中所指出的那样。