Question

我在bootstrap中使用分页组件，分页本身很简单：

<ul class="pagination">
  <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
</ul>

但是我希望显示元数据，例如总页数，分页旁边的总记录数，并且我希望信息可以通过分页控件在中间对齐。

我无法在ul元素中添加页面信息，因为它是由第三方库生成的。

我试过这个：

http://plnkr.co/edit/abVwf6rnluYKiOOzXNrt?p=preview

如图所示，它没有按预期方式对齐。

似乎我可以为padding设置margin或div.pageinfo或设置height和line-height，但我想知道这是不是可以不加强编码

Answer 1

问题

有两个主要问题需要解决：

阻止你移动你的块的一个问题是你有一个内联样式为display: inline-block的包装div和像pull-left这样强制你的元素的Bootstrap类按原样显示。
对IE8支持的需求将最大限度地为您的用户提供相同的体验，而不会影响您网站的性能。

<强>建议

在IE8中，与现代对手相比，网站呈现相同的期望在这个时代或多或少是不合理的。为了做到这一点，你必须跳过的箍数非常疯狂。从Bootstrap 4开始，Bootstrap本身也不赞成使用IE8支持。唯一能让我看到合理案例的方法是，如果Google Analytics数据显示大多数用户都在IE8上。

所以你可以做的最好的事情是（1）建议分页项目限制为X数，以便它适合某个宽度并在每次添加某些内容时更新固定宽度，或者（2）接受优雅IE8上的网站性能下降，以便为我所承担的内容提供更好的体验，这是现代浏览器中的大多数用户。

解决方案：现代浏览器

实现您想要的最简单方法是使用flexbox。我删除了任何不必要的类名，并在下面添加了最简单的代码示例（主要适用于Chrome）。带有所有前缀的代码可以在演示中找到，但这应该可以得到你想要的东西（减去IE8和IE9）。

代码（Demo）

HTML

<div class="text-center">
  <div id="nav">
    <div class="pageinfo">Total:xxx 1/xx</div>
    <div>
      <ul class="pagination">
        <li class="disabled">
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="active">
          <a href="#">1 <span class="sr-only">(current)</span></a>
        </li>
    </ul>
  </div>
</div>

CSS

#nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pageinfo {
  margin-bottom: 5px;
  margin-right: 10px;
}

更新：IE8解决方案

这是IE8替代品的demo，它利用块来实现效果。但是，虽然我知道您特别要求不对代码的大小进行硬编码，但由于需要支持IE8等传统浏览器，因此不能（据我所知）可以避免这种情况。

要理解的关键是旧版浏览器的智能程度远低于现代浏览器。我认为你可以尝试的唯一其他选择是使用JavaScript来动态确定元素的宽度，但它开始耗费大量工作并影响性能。

HTML

<div class="text-center">
  <div id="nav">
    <div class="pageinfo">Total:xxx 1/xx</div>
    <div>
      <ul class="pagination">
        <li class="disabled">
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="active">
          <a href="#">1 <span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS

#nav {
  display: block;
  width: 200px;
  margin: 0 auto;
}

#nav div {
  display: block;
}

.pageinfo {
  float: left;
  margin-right: 10px;
  margin-top: 8px;
}

.page-menu {
  float: left;
}

.page-menu ul {
  margin: 0;
  padding: 0;
  margin-top: 2px;
}

Answer 2

我希望您正在寻找类似下面的内容，

/* Styles go here */

.mata-data {
    display: inline;
    position: absolute;
    margin-top: 27px;
    margin-left: 25px;
}

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>

  <div class="text-center">
    <div>
      <div class="mata-data">Total:xxx 1/xx</div>
      <div class="container pull-left">
        <ul class="pagination">
          <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
          <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        </ul>
      </div>
    </div>
  </div>

</body>

</html>

使一个元素在其兄弟中间对齐

2 个答案: