控制 HTML 溢出/可见性
Controlling HTML overflow/visibility
我正在开发一个具有引导三列设计的网站，其中分页控件需要遵守以下约束：
- 适合中间列。
- 保持单行，不换行。
- 反应迅速。我不需要"完整"/"流体"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 的答案。
目前，.pagination不显示为内联弹性。Bootstrap也使用该类并使其成为内联块。将 .pagination 更改为 ul.pagination，以便选择您的 CSS（因为它更具体）。这将强制所有列表项在一行中。
根据你想要的，你可以给ul一个最大宽度，并在你的CSS中使用overflow-x：scroll。您可能需要添加宽度：100%;为您的 ul.pagiation。
对不起，我不够具体。我已经把我的建议放在下面的片段中。（检查 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>相关文章：
- D3在一个调用中绘制不同的SVG形状，没有可见性
- jQuery css可见性在load方法中不起作用
- 页面可见性API实际上支持操作系统屏幕锁定吗
- 有没有一种方法可以从隐藏的可见性(CSS，JS）中获得淡入效果
- JavaScript可见性不起作用('隐藏'起作用，'可见'不起作用）
- 从内部回调的可见性
- Openlayers 3为了可见性而绑定到Vector层的复选框没有任何作用
- 在另一个下拉列表中的选择上切换下拉列表中选项的可见性
- 如何禁用mouseout可见性＝“;隐藏的“;对小于768px的介质的影响
- 在网格视图的自动刷新过程中，设置内部网格视图文本框的可见性
- 将元素的可见性绑定到另一个元素
- 使用 Javascript 将 HTML 页面中的默认可见性从可见更改为隐藏
- 使用 jQuery 检查文本可见性 .包含代码的行为不符合预期
- 在 jQuery 手风琴样式菜单中切换子项可见性
- CSS 中定义的可见性值未显示在 Javascript 中
- jquery切换可见性
- 如何使用 asp.net 中的另一个下拉列表更改下拉列表选定的索引和可见性
- 使用javascript的图像可见性
- 控制 HTML 溢出/可见性
- 滚动溢出时检查视口中对象的可见性
