css - 空白 : nowrap doesn't work in element UL

Question

我尽量不要将字母换行。我也在使用 Bootstrap 。

我的问题:

我的 HTML:

<div class="container">
    <div id="tabulation">
        <nav class="text-center">
            <ul class="pagination">
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">Z</a></li>
            </ul>
        </nav>      
    </div>
</div>

我的 CSS:

ul {
    white-space: nowrap;
    overflow-x: auto;
}

Booststrap 的 CSS:

nav {
    display: block;
}
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination>li {
    display: inline;
}

我想通过滚动将所有字母留在同一行，就像这张表。如果太长，请添加滚动条。

参见JSFiddle例子/问题。

非常感谢。

Answer 1

问题是使用带有 a 的 float (在 Bootstrap 中默认设置)。将它们设为 inline-block:

ul {
  white-space: nowrap;
  overflow-x: auto;
  font-size: 0; /*Remove white space*/
  width: 100%;
}

ul.pagination li {
  font-size: initial;
}

ul.pagination li a {
  float: none;
  display: inline-block;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div id="tabulation">
    <nav class="text-center">
      <ul class="pagination">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
        <li><a href="#">F</a></li>
        <li><a href="#">G</a></li>
        <li><a href="#">H</a></li>
        <li><a href="#">I</a></li>
        <li><a href="#">J</a></li>
        <li><a href="#">K</a></li>
        <li><a href="#">L</a></li>
        <li><a href="#">M</a></li>
        <li><a href="#">N</a></li>
        <li><a href="#">O</a></li>
        <li><a href="#">P</a></li>
        <li><a href="#">Q</a></li>
        <li><a href="#">R</a></li>
        <li><a href="#">S</a></li>
        <li><a href="#">T</a></li>
        <li><a href="#">U</a></li>
        <li><a href="#">V</a></li>
        <li><a href="#">Z</a></li>
      </ul>
    </nav>
  </div>
</div>