Question

我想让我的列表可以水平滚动，但无论我做什么，它似乎只是按宽度包装内容。我的列表位于表格单元格内。

HTML：

<td class="scrollable"> 
  <ol>
    <li> bla bla bla bla </li>
  </ol>
</td>

CSS：

td {
  height: 200px;
  overflow-x: auto;
}


ol {
  height: 160px;
  margin: 0;
  padding:0;

  border: 2px solid black;
  overflow-y: auto;
  overflow-x: auto;
}

li {
  padding-bottom: 5px;
  width: 95%;
  white-space: nowrap;
  display: inline;
}

.scrollable {
  width: 10%;
  overflow-y: auto;
  overflow-x: auto;
}

如何将其水平滚动？

Answer 1

只有在需要时才会显示滚动条。您根本没有足够的内容来滚动它。如果您遇到任何其他问题，请随时询问。

尝试以下HTML：

<td class="scrollable">
  <ol>
    <li> bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla</li>
  </ol>
</td>

Jsfiddle：https://jsfiddle.net/nikdtu/d7u2c1b7/

Answer 2

如果您只希望列表可以在表格单元格内滚动，而不是所有页面，那么您必须为此列表设置一些宽度，尝试添加更多内容并将<nav class="navbar navbar-default" role="navigation" id="topmenu"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown active"> <a href="us.html" data-toggle="collapse" data-target="#one">US</a> </li> <li class="dropdown"> <a href="services.html" data-toggle="collapse" data-target="#two">SERVICES</a> </li> <li class="dropdown"> <a href="wwu.html" data-toggle="collapse" data-target="#three">WORK WITH US</a> </li> <li class="dropdown"> <a href="en.html" data-toggle="collapse" data-target="#four">EN</a> </li> </ul> </nav>宽度设置为100px。

HTML列表的水平滚动

2 个答案: