侧边导航栏中ul中li个数超过ul容纳范围时,滚动条出现后导致li的宽度被压缩,怎么让滚动条不挤压li宽度,让其悬浮在ul右侧
时间: 2024-05-09 08:18:56 浏览: 33
可以在外层包裹一个容器,设置其为相对定位(position: relative),然后为 ul 设置绝对定位(position: absolute),并且设置右边距为滚动条的宽度,这样 ul 就可以悬浮在容器的右侧,而不会受到滚动条的影响。具体代码如下:
HTML:
```html
<div class="nav-container">
<ul class="nav-list">
<li>导航项1</li>
<li>导航项2</li>
<li>导航项3</li>
<li>导航项4</li>
<li>导航项5</li>
<li>导航项6</li>
<li>导航项7</li>
<li>导航项8</li>
<li>导航项9</li>
<li>导航项10</li>
</ul>
</div>
```
CSS:
```css
.nav-container {
position: relative;
overflow-x: scroll;
/* 设置滚动条样式 */
scrollbar-width: thin;
scrollbar-color: #ccc #f5f5f5;
}
.nav-list {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
/* 设置滚动条样式 */
scrollbar-width: thin;
scrollbar-color: #ccc #f5f5f5;
/* 设置右边距为滚动条的宽度 */
margin-right: calc(-1 * var(--scrollbar-width));
}
.nav-list li {
display: inline-block;
padding: 10px;
background-color: #f5f5f5;
/* 设置滚动条样式 */
scrollbar-width: thin;
scrollbar-color: #ccc #f5f5f5;
}
```
其中,通过设置滚动条的样式(scrollbar-width 和 scrollbar-color)来美化滚动条;通过设置变量(--scrollbar-width)来动态计算滚动条的宽度,使得右边距恰好为滚动条的宽度。