使用 CSS 将数据表分页控件包装在 div 中答案

【问题标题】：Wrap datatable pagination control inside a div using CSS使用 CSS 将数据表分页控件包装在 div 中
【发布时间】：2016-05-04 11:09:33
【问题描述】：

我有一个带分页的数据表。我想为包含pagination ul 的div 设置样式。我已经尝试了以下代码，但它似乎不起作用。我无法将ul 放入div.row 中（无法提供所需的CSS 样式）：

HTML：

 <div class="row myClass">
 <div class="col-xs-6"></div>
 <div class="col-xs-6">
<div class="dataTables_paginate paging_full_numbers" id="grid_paginate">
  <ul class="pagination myUlClass">
    <li class="paginate_button first disabled" aria-controls="grid" tabindex="0" id="grid_first">
      <a href="#" class="paginationFirst"> &lt;&lt; </a>
    </li>
    <li class="paginate_button previous disabled" aria-controls="grid" tabindex="0" id="grid_previous">
      <a href="#" class="paginationPrevious"> &lt; </a>
    </li>
    <li class="paginate_button active" aria-controls="grid" tabindex="0">
      <a href="#" class="">1</a>
    </li>
    <li class="paginate_button " aria-controls="grid" tabindex="0">
      <a href="#" class="">2</a>
    </li>
    <li class="paginate_button " aria-controls="grid" tabindex="0">
      <a href="#" class="">3</a></li>
    <li class="paginate_button next" aria-controls="grid" tabindex="0" id="grid_next">
      <a href="#" class="paginationNext"> &gt; </a>
    </li>
    <li class="paginate_button last" aria-controls="grid" tabindex="0" id="grid_last">
      <a href="#" class="paginationLast"> &gt;&gt; </a>
    </li>
  </ul>
</div>

CSS：

.myClass
{
border:1px solid grey;
height:50px;
margin-top:10px;
background-color: #ddd;
}

.myUlClass
{
  float:right;
  z-index:10;
  margin-bottom:10px;
}

这是不工作的Demo

我想要的输出看起来像

我想要纯 CSS 解决方案，而不需要修改 HTML。

【问题讨论】：

标签： html css twitter-bootstrap-3 datatables

【解决方案1】：

就像设置下面的css一样简单？

.myUlClass {
  border:1px solid grey;
  height:50px;
  margin-top: 7px;
  margin-bottom:10px;
  background-color: #ddd;
}

【讨论】：

对不起，我的意思是.myUlClass，但我猜你不想设置那些样式，而是分页周围的 div？
两者都可以，我只想要 CSS 解决方案。谢谢它的工作:)

【解决方案2】：

Demo问题是你没有重置margin on ul现在检查演示分页在中心

【讨论】：

【解决方案3】：

/* CSS used here will be applied after bootstrap.css */
.myClass .paging_full_numbers ul
{
    border:1px solid grey;
    height:50px;
    margin-top:10px;
    background-color: red;
    padding-top:6px;
}

.myUlClass
{
  float:right;
  z-index:10;
  margin-bottom:10px;
}

.myUlClass>.active>a{
   background-color: green; 
  }

【讨论】：