如何使li项溢出隐藏而不是放入下一行

Question

我正在尝试使用li标签在一行中创建图像，当它们超过div或ul的宽度时它们会进入下一行，我希望它们在行中并在它们超过时隐藏。

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

这可能是一种方法：

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

li是display: inline-block;而ul是white-space: nowrap;所以li不能包裹。

Answer 2

https://jsfiddle.net/kirandash/kcstc868/

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

#ulThumbs{    
margin: 5px;
overflow: hidden;
background-color: red;   
padding-left: 0px;
white-space: nowrap;
overflow-x: scroll;
}

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

Answer 3

尝试一次不要使用边距进行此类布局。

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;