使用CSS在div内部包装数据表分页控件

Question

我有一个分页的数据表。我想设置包含div的{​​{1}}样式。我尝试了以下代码，但它似乎不起作用。我无法将pagination ul置于ul内（无法提供所需的CSS样式）：

HTML：

div.row

CSS：

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

这是非工作Demo

我想要的输出看起来像

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

Answer 1

就像设置以下css一样简单吗？

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

Answer 2

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

Answer 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; 
  }