我正在设计一个列表,为了与对等元素保持一致,它需要位于具有圆 Angular 边框的元素中。该列表可能足够高也可能不够高以产生垂直滚动条。
如果我用完全圆 Angular 的列表样式,滚动条会遮住圆 Angular ,看起来很破:
ul {
border: 2px solid grey;
border-radius: 10px;
overflow-x: hidden;
overflow-y: auto;
max-height: 8em;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
如果我去掉右 Angular 圆 Angular ,滚动条在出现时看起来是正确的:
ul {
border: 2px solid grey;
border-radius: 10px 0 0 10px;
overflow-x: hidden;
overflow-y: auto;
max-height: 8em;
}
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
但这意味着当列表太短无法滚动时元素看起来不一致。我可以设置 overflow-y:scroll
而不是 auto,但我宁愿避免总是显示栏。有什么方法可以设置样式,使没有溢出的元素有圆 Angular ,但有滚动条的元素没有? (欢迎其他解决方案!)
最佳答案
您可以将 div
包裹在 ul
元素周围。然后在 div
上应用 border-radius
。要 overflow hidden Angular 落的 scollbar,请对其应用 overflow: hidden
。
div {
border: 2px solid grey;
border-radius: 10px;
overflow: hidden;
}
ul{
overflow-x: hidden;
overflow-y: auto;
max-height: 8em;
margin: 0;
}
<div>
<ul>
<li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
<li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
</ul>
</div>
关于css - 我应该如何设置带有边框、边框半径和溢出 :auto? 的元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44758415/