user6920839 user6920839 - 2 months ago 9
CSS Question

how to make li items overflow hidden instead of dropping into next line

I am trying to make images in one line using li tags, they are going into next line when they exceed the width of div or ul, I want them in line and hide when they exceed.



#thumbsUp{
width: 100%;
height: 100px;
background-color: gray;
overflow: hidden;
}

#ulThumbs{
margin: 5px;
overflow: hidden;
background-color: red;
padding-left: 0px;
}

#ulThumbs li{
margin-left: 5px;
float: left;
width: 20%;
height: 80px;
background-color: blue;
display: inline;
list-style: none;
}

<div id='main'>
<div id='thumbsUp'>
<ul id='ulThumbs'>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>

</ul>
</div>
</div>




Answer

This could be a way to do this:

.container {
  width: 200px;
  overflow: hidden;
  overflow-x: auto;
  }

ul.thumbs {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
ul.thumbs li {
  display: inline-block;
}
<div class="container">
  <ul class="thumbs">
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
    <li>
      <img src="http://placehold.it/50x50">
    </li>
  </ul>
</div>

The li's are display: inline-block; and the ul has white-space: nowrap; so the li's can't wrap.