Проведите по экрану слева направо LI без прокрутки CSS или JS?

Question

Я пытаюсь пронести LI слева направо в мобильном телефоне, и я сделал это просто с CSS, я знаю, что это легко сделать с любым плагином, но я не могу использовать какой-либо плагин в своем проекте. Вот JSfiddle demo, что я создали основное требование, чтобы удалить эту полосу прокрутки снизу, на мобильном телефоне, когда полоса прокрутки появляется при касании области содержимого.

Если я делаю родительский div overflow:hidden, то я не могу пронести.

.spotlight_numbers-v2 { 
 
width: 100%; 
 
max-width: 480px; 
 
float: left; 
 
background: #f3f3f3; 
 
overflow: auto; 
 
} 
 
.spotlight_numbers-v2 > ul { 
 
list-style: none; 
 
margin: 0; 
 
padding: 0; 
 
width: 150%; 
 
} 
 
.spotlight_numbers-v2 > ul > li { 
 
color: #606060; 
 
font-weight: 500; 
 
display: inline-block; 
 
list-style: none; 
 
margin: 0 15px; 
 
padding: 10px; 
 
text-transform: uppercase; 
 
font-size: 16px; 
 
} 
 
.spotlight_numbers-v2 > ul > li > a { 
 
color: #606060; 
 
text-decoration: none; 
 
}

<div class="spotlight_numbers-v2"> 
 
    <ul> 
 
    <li><a href="#">Doctors</a></li> 
 
    <li><a href="#">Hospital</a></li> 
 
    <li><a href="#">Articles</a></li> 
 
    <li><a href="#">Drugs</a></li> 
 
    <li><a href="#">Interview</a></li> 
 
    </ul> 
 
</div>

Пожалуйста, предложите

Answer 1

Просто используйте другой контейнер и дать ему высоту, меньшую, чем высота .spotlight_numbers-v2 и установите контейнер overflow: hidden;.

.container{ 
 
    height: 40px; 
 
    overflow: hidden; 
 
} 
 

 
.spotlight_numbers-v2 { 
 
    width: 100%; 
 
    max-width: 480px; 
 
    float: left; 
 
    background: #f3f3f3; 
 
    overflow-y: auto; 
 
} 
 
.spotlight_numbers-v2 > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 150%; 
 
} 
 
.spotlight_numbers-v2 > ul > li { 
 
    color: #606060; 
 
    font-weight: 500; 
 
    display: inline-block; 
 
    list-style: none; 
 
    margin: 0 15px; 
 
    padding: 10px; 
 
    text-transform: uppercase; 
 
    font-size: 16px; 
 
} 
 
.spotlight_numbers-v2 > ul > li > a { 
 
    color: #606060; 
 
    text-decoration: none; 
 
}

<div class="container"> 
 
    <div class="spotlight_numbers-v2"> 
 
    <ul> 
 
     <li><a href="#">Doctors</a> 
 
     </li> 
 
     <li><a href="#">Hospital</a> 
 
     </li> 
 
     <li><a href="#">Articles</a> 
 
     </li> 
 
     <li><a href="#">Drugs</a> 
 
     </li> 
 
     <li><a href="#">Interview</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>