控制 HTML 溢出/可见性答案

【问题标题】：Controlling HTML overflow/visibility控制 HTML 溢出/可见性
【发布时间】：2016-04-22 00:21:09
【问题描述】：

我正在开发一个采用引导式三栏设计的网站，其中分页控件需要遵守以下约束：

适合中间列。
保持单行而不换成多行。
反应灵敏。我不需要“full”/“fluid” col-xs 来响应 col-xl，只需要在 col-md 之上流动的东西，我可以实现 col-xs 和 col-sm 的替代方案。

我完全无法弄清楚如何才能让这该死的东西表现出来。

“基地”是这样的：

.pagination-button {
  font-size: 2em;
}

<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- MDB core CSS -->
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet">   
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"  rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script>
<body>
  <div class='container-fluid'>
    <div class='row'>
      <div class='col-xs-2'>
        <div class="card-panel">
          <span>Foo</span>
        </div>
      </div>
      <div class='col-xs-8'>
        <ul class="pagination">
          <li>
            <a class="pagination-item" href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i></a>
          </li>
          <li>
            <a class="pagination-item" href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i></a>
          </li>
          <li>
            <a class="pagination-item" href="?page=1">1</a>
          </li>
          <li class="active">
            <a class="pagination-item" href="?page=2">2</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=3">3</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=4">4</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=5">5</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=6">6</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=7">7</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=8">8</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=9">9</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=10">10</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=11">11</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=12">12</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=13">13</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=14">14</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=15">15</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=16">16</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=17">17</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=18">18</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=19">19</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=20">20</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=21">21</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=22">22</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=23">23</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=24">24</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=25">25</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=26">26</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=27">27</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=28">28</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=29">29</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=30">30</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=31">31</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=32">32</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=3"><i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i></a>
          </li>
          <li>
            <a class="pagination-item" href="?page=32"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i></a>
          </li>
        </ul>
      </div>
      <div class='col-xs-2'>
        <div class="card-panel">
          <span>Foo</span>
        </div>
      </div>
    </div>
  </div>
</body>

我能够把它整理成一行：

.pagination-button {
  font-size: 2em;
}
.pagination {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 1;
  justify-content: center;
  white-space: nowrap;
}

<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- MDB core CSS -->
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script>

<body>
  <div class='container-fluid'>
    <div class='row'>
      <div class='col-xs-2'>
        <div class="card-panel">
          <span>Foo</span>
        </div>
      </div>
      <div class='col-xs-8'>
        <ul class="pagination">
          <li>
            <a href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i></a>
          </li>
          <li>
            <a href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i></a>
          </li>
          <li><a href="?page=1">1</a>
          </li>
          <li class="active"><a href="?page=2">2</a>
          </li>
          <li><a href="?page=3">3</a>
          </li>
          <li><a href="?page=4">4</a>
          </li>
          <li><a href="?page=5">5</a>
          </li>
          <li><a href="?page=6">6</a>
          </li>
          <li><a href="?page=7">7</a>
          </li>
          <li><a href="?page=8">8</a>
          </li>
          <li><a href="?page=9">9</a>
          </li>
          <li><a href="?page=10">10</a>
          </li>
          <li><a href="?page=11">11</a>
          </li>
          <li><a href="?page=12">12</a>
          </li>
          <li><a href="?page=13">13</a>
          </li>
          <li><a href="?page=14">14</a>
          </li>
          <li><a href="?page=15">15</a>
          </li>
          <li><a href="?page=16">16</a>
          </li>
          <li><a href="?page=17">17</a>
          </li>
          <li><a href="?page=18">18</a>
          </li>
          <li><a href="?page=19">19</a>
          </li>
          <li><a href="?page=20">20</a>
          </li>
          <li><a href="?page=21">21</a>
          </li>
          <li><a href="?page=22">22</a>
          </li>
          <li><a href="?page=23">23</a>
          </li>
          <li><a href="?page=24">24</a>
          </li>
          <li><a href="?page=25">25</a>
          </li>
          <li><a href="?page=26">26</a>
          </li>
          <li><a href="?page=27">27</a>
          </li>
          <li><a href="?page=28">28</a>
          </li>
          <li><a href="?page=29">29</a>
          </li>
          <li><a href="?page=30">30</a>
          </li>
          <li><a href="?page=31">31</a>
          </li>
          <li><a href="?page=32">32</a>
          </li>
          <li>
            <a href="?page=3"><i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i></a>
          </li>
          <li>
            <a href="?page=32"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i></a>
          </li>
        </ul>
      </div>
      <div class='col-xs-2'>
        <div class="card-panel">
          <span>Foo</span>
        </div>
      </div>
    </div>
  </div>
</body>

如何清理此列表以使其更具响应性？只有 CSS 会很棒，但在尝试让它工作几个小时后，我什至愿意接受基于 JavaScript 的方法来解决我遇到的这个 UX/UI 问题。

我的想法是，如果我可以用优先级标记每个 <li> 元素，然后按优先级顺序将元素添加到 <ul> 直到它们填满允许的宽度，我可以很容易地解决它，但是我我不知道如何很好地实现这样的事情并避免所有常见的浏览器边缘情况，我会把 CSS 扔出窗外去做，我仍然希望他们是一个更简单的基于 CSS 的答案。

【问题讨论】：

标签： javascript html css twitter-bootstrap flexbox

【解决方案1】：

抱歉，我不够具体。我已将我的建议放在下面的 sn-p 中。（检查 ul.pagination CSS 块）它适合中间列，并保持在一行上。

取决于你想要的部分主要是关于响应，有几种方法可以做到这一点。这是一个设计/交互问题。我建议溢出-x：滚动；为此。

.pagination-button {
  font-size: 2em;
}
ul.pagination {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 1;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
  overflow-x: scroll;
}

<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- MDB core CSS -->
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script>

<body>
  <div class='container-fluid'>
    <div class='row'>
      <div class='col-xs-2'>
        <div class="card-panel">
          <span>Foo</span>
        </div>
      </div>
      <div class='col-xs-8'>
        <ul class="pagination">
          <li>
            <a href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i></a>
          </li>
          <li>
            <a href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i></a>
          </li>
          <li><a href="?page=1">1</a>
          </li>
          <li class="active"><a href="?page=2">2</a>
          </li>
          <li><a href="?page=3">3</a>
          </li>
          <li><a href="?page=4">4</a>
          </li>
          <li><a href="?page=5">5</a>
          </li>
          <li><a href="?page=6">6</a>
          </li>
          <li><a href="?page=7">7</a>
          </li>
          <li><a href="?page=8">8</a>
          </li>
          <li><a href="?page=9">9</a>
          </li>
          <li><a href="?page=10">10</a>
          </li>
          <li><a href="?page=11">11</a>
          </li>
          <li><a href="?page=12">12</a>
          </li>
          <li><a href="?page=13">13</a>
          </li>
          <li><a href="?page=14">14</a>
          </li>
          <li><a href="?page=15">15</a>
          </li>
          <li><a href="?page=16">16</a>
          </li>
          <li><a href="?page=17">17</a>
          </li>
          <li><a href="?page=18">18</a>
          </li>
          <li><a href="?page=19">19</a>
          </li>
          <li><a href="?page=20">20</a>
          </li>
          <li><a href="?page=21">21</a>
          </li>
          <li><a href="?page=22">22</a>
          </li>
          <li><a href="?page=23">23</a>
          </li>
          <li><a href="?page=24">24</a>
          </li>
          <li><a href="?page=25">25</a>
          </li>
          <li><a href="?page=26">26</a>
          </li>
          <li><a href="?page=27">27</a>
          </li>
          <li><a href="?page=28">28</a>
          </li>
          <li><a href="?page=29">29</a>
          </li>
          <li><a href="?page=30">30</a>
          </li>
          <li><a href="?page=31">31</a>
          </li>
          <li><a href="?page=32">32</a>
          </li>
          <li>
            <a href="?page=3"><i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i></a>
          </li>
          <li>
            <a href="?page=32"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i></a>
          </li>
        </ul>
      </div>
      <div class='col-xs-2'>
        <div class="card-panel">
          <span>Foo</span>
        </div>
      </div>
    </div>
  </div>
</body>

【讨论】：

【解决方案2】：

目前，.pagination 不显示为 inline-flex。 Bootstrap 也使用该类并使其成为内联块。将 .pagination 更改为 ul.pagination 以便选择您的 CSS（因为它更具体）。这将强制将所有列表项排成一行。

根据你想要的，你可以给 ul 一个最大宽度并使用 overflow-x:scroll;在你的 CSS 中。您可能必须添加宽度：100%;用于您的 ul.pagination。

【讨论】：

将.pagination 更改为ul.pagination 不会改变任何东西，它与我的第二个代码sn-p 相同。解释（最好是演示）width、max-width 和 overflow-x:scroll 将如何解决问题，这将使这个答案变得更有用。还有“取决于你想要什么”（原文如此） - 我的 3 个目标是否不够清楚？我应该进一步详细说明我想要什么，因为我在这里确实有一个明确的目标并试图传达它？