用于溢出/滚动指示器的仅CSS解决方案

Question

我有一些使用CSS完成的滚动指示器。这项工作几乎无处不在，而且非常棒。唯一的问题是，如果盒子没有溢出（第一盒子），那么盒子的内容不与左边对齐。任何想法如何做到这一点？另外：欢迎您.scrollbox ul使用此代码:)

html { 
 
    background: #FFF; 
 
} 
 

 
.scrollbox ul { 
 
    white-space: nowrap; 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1 0 auto; 
 
     -ms-flex: 1 0 auto; 
 
      flex: 1 0 auto; 
 
    margin-left: -4rem; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    list-style-type: none; 
 
} 
 

 
.scrollbox { 
 
    outline: 1px dotted black; 
 
    position: relative; 
 
    z-index: 1; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: start; 
 
    -webkit-justify-content: flex-start; 
 
     -ms-flex-pack: start; 
 
      justify-content: flex-start; 
 
    -webkit-overflow-scrolling: touch; 
 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
 
    -webkit-flex-wrap: nowrap; 
 
     -ms-flex-wrap: nowrap; 
 
      flex-wrap: nowrap; 
 
    word-wrap: nowrap; 
 
    max-width: 200px; 
 
    margin: 50px auto; 
 
    background: #FFF no-repeat; 
 
    background-image: 
 
    -webkit-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)), 
 
    -webkit-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)); 
 
    background-image: 
 
    -o-radial-gradient(0 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)), 
 
    -o-radial-gradient(100% 50%, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)); 
 
    background-image: 
 
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)), 
 
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)); 
 
    background-position: 0 0, 100% 0; 
 
    background-size: 1rem 100%; 
 
} 
 

 
.scrollbox::before, 
 
.scrollbox::after { 
 
    content: ''; 
 
    position: relative; 
 
    z-index: -1; 
 
    display: block; 
 
    width: 2rem; 
 
    margin: 0; 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1 0 auto; 
 
     -ms-flex: 1 0 auto; 
 
      flex: 1 0 auto; 
 
} 
 

 
.scrollbox::before { 
 
    background: -webkit-gradient(linear,left top, right top,from(#FFF),color-stop(50%, #FFF),to(rgba(255,255,255,0))); 
 
    background: -webkit-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0)); 
 
    background: -o-linear-gradient(left,#FFF,#FFF 50%,rgba(255,255,255,0)); 
 
    background: linear-gradient(to right,#FFF,#FFF 50%,rgba(255,255,255,0)); 
 
} 
 

 
.scrollbox::after { 
 
    background: -webkit-gradient(linear,left top, right top,from(rgba(255,255,255,0)),color-stop(50%, #FFF),to(#FFF)); 
 
    background: -webkit-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF); 
 
    background: -o-linear-gradient(left,rgba(255,255,255,0),#FFF 50%,#FFF); 
 
    background: linear-gradient(to right,rgba(255,255,255,0),#FFF 50%,#FFF); 
 
}

<div class="scrollbox"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    </ul> 
 
</div> 
 

 

 
<div class="scrollbox"> 
 
    <ul> 
 
    <li>Ah! Scroll right!</li> 
 
    <li>2 Lorem Ipsum</li> 
 
    <li>3 Lorem Ipsum</li> 
 
    <li>4 Lorem Ipsum</li> 
 
    <li>5 Lorem Ipsum</li> 
 
    <li>6 Lorem Ipsum</li> 
 
    <li>7 Lorem Ipsum</li> 
 
    <li>8 Lorem Ipsum</li> 
 
    <li>9 Lorem Ipsum</li> 
 
    <li>1 Lorem Ipsum0</li> 
 
    <li>1 Lorem Ipsum</li> 
 
    <li>2 Lorem Ipsum</li> 
 
    <li>3 Lorem Ipsum</li> 
 
    <li>4 Lorem Ipsum</li> 
 
    <li>5 Lorem Ipsum</li> 
 
    <li>6 Lorem Ipsum</li> 
 
    <li>7 Lorem Ipsum</li> 
 
    <li>8 Lorem Ipsum</li> 
 
    <li>9 Lorem Ipsum</li> 
 
    <li>1 Lorem Ipsum0</li> 
 
    <li>1 Lorem Ipsum</li> 
 
    <li>2 Lorem Ipsum</li> 
 
    <li>3 Lorem Ipsum</li> 
 
    <li>4 Lorem Ipsum</li> 
 
    <li>5 Lorem Ipsum</li> 
 
    <li>6 Lorem Ipsum</li> 
 
    <li>7 Lorem Ipsum</li> 
 
    <li>8 Lorem Ipsum</li> 
 
    <li>The end!</li> 
 
    <li>No shadow there.</li> 
 
    </ul> 
 
</div>

Answer 1

设置padding-left: 0 - 它填充默认