Question

我有一个项目列表：

<div class="dates-bar">
    <ul>
      <li>1</li>
      <li>...</li>
      <li>30</li>
   </ul>
</div>

我需要这个栏在一行。我不知道如何实现这一目标。我尝试过以下方法：

.dates-bar {
    width: 100%;
    overflow-x: scroll;
}

.dates-bar ul {
   width: 500%;
}

.dates-bar li {
   display: inline-block;
   margin: 0 10px;
}

这里的问题是，如果数字项交叉到达栏的末尾，它会将项目包装到第二行，如果项目数量很少，那么最后会有一个巨大的差距。这个酒吧。通过一些调整，我可以修复后者。但是，我不知道该怎么办，所以这些项目不会越过第二行。

Answer 1

.dates-bar{
    width:auto;
    max-width:100%
    overflow-x: atuo;
}

.dates-bar ul{
    white-space: nowrap;
}

空白属性是缺失的成分。

Answer 2

将您的UL设置为display:flex;

.dates-bar {
    width: 150px;
    overflow-x: scroll;
}

.dates-bar ul {
  display:flex;
}  

.dates-bar li {
   display: inline-block;
   margin: 0 10px;
}

<div class="dates-bar">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>...</li>
      <li>30</li>
   </ul>
</div>

Answer 3

您可以使用display: flex;：

.dates-bar { 
  width: 100%; 
 } 
.dates-bar ul { 
  width: 500%; 

  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
}
.dates-bar li { 
  display: inline-block; 
  margin: 0 10px; 

  flex: 0 0 auto;
}

Answer 4

试试这个CSS：

.dates-bar li {
    display: inline-block;
    margin: 0 10px;
}
.dates-bar {
   width: auto;
   overflow-x: scroll;
}
.dates-bar ul {
    white-space: nowrap;
}

小提琴：http://jsfiddle.net/wfxhuwvc/

如何在没有项目进入第二行的情况下将列表水平滚动？

4 个答案: