Question

我正在设计一个列表，为了与对等元素保持一致，需要在带有圆角边框的元素中。该列表可能高得足以导致垂直滚动条。

如果我使用完全圆角设置列表的样式，滚动条会遮挡圆角，这看起来很破碎：

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>

如果我删除了右侧的圆角，当前的滚动条看起来是正确的：

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而不是自动，但我宁愿避免总是显示栏。有没有办法设计这个样式，以便没有溢出的元素有圆角，但带滚动条的元素不是？（其他解决方案欢迎！）

Answer 1

您可以在div元素周围包裹ul。然后在border-radius上应用div。要隐藏溢出角落的scollbar，请将overflow: hidden应用于它。

＆＃13;

div {
    border: 2px solid grey;
    border-radius: 10px;
    overflow: hidden;
}

ul{
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 8em;
    margin: 0;
}

＆＃13;

<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>

＆＃13;

Answer 2

这是我提出的解决方案：
如果div大于150像素，则会将rounded类添加到ul，而右边框不会被舍入。
与此相关的是，你在max-height中使用像素作为一个整体来发信息：编辑：我添加了一个小按钮，这会添加一个列表项，以便您可以看到效果。

编辑2：编辑我的笔，这样您就可以使用vh代替像素。只需更改0.4（0.4 = 40vh）

中的var containerHeight即可

＆＃13;

var containerHeight = $(window).height() * 0.4;

$('button').click(function(){
    $('.listContainer').append('<li>Item</li>');
    if ($('.listContainer').outerHeight() >= containerHeight) {
       $('.listContainer').addClass("notrounded");
    }
});

＆＃13;

ul{
border: 2px solid grey;
border-radius: 10px;
overflow-x: hidden;
overflow-y: auto;
max-height: 40vh;
}
ul.notrounded{
border-radius: 10px 0 0 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="listContainer">
<li>Item</li><li>Item</li><li>Item</li>
</ul>
<button>add list item</button>

＆＃13;

Answer 3

它的默认问题是因为滚动条始终显示在图层上方，但您可以使用替代方法来减少此问题，即

	ul{

overflow-x: hidden;
overflow-y: auto;
max-height: 8em;
}
.border_sec{
	border: 2px solid grey;
border-radius: 10px;
}

<div class="border_sec">
<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>

我应该如何设置带有border，border-radius和overflow：auto的元素的样式？

3 个答案: