css - 我应该如何设置带有边框、边框半径和溢出 :auto? 的元素的样式

Question

我正在设计一个列表，为了与对等元素保持一致，它需要位于具有圆 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 ，但有滚动条的元素没有？ (欢迎其他解决方案!)

Answer 1

您可以将 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>