Question

我正在尝试不要将字母换成多行。我也在使用引导程序。

我的问题：

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

Answer 2

还有CSS flex layout的替代方法，可以通过将示例CSS替换为以下内容来在示例页面上强制实施：

.pagination {
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
ul, .pagination {
    display:        flex;
    flex-direction: row;
    flex-wrap:      nowrap;
    overflow-x:     auto;
}
li {
    flex:   1 1 auto;
}

在this JS fiddle现场观看。

空格：nowrap在UL元素中不起作用

2 个答案: