html - 分页用圆圈替换默认正方形

Question

我正在尝试使用引导类实现分页

.circle {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;  
  border: 2px solid #777;
  border-radius: 100%;
}

.pagination>li>a, .pagination>li>span {
  border-radius: 100% !important;
  border: 0px !important;
}

.active {
  background: #777;
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
<ul class="pagination">
              <li><a href="#">«</a></li>             
              <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
              <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
              <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
              <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
              <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
              <li><a href="#">»</a></li>
 </ul>
</div>

我试图删除默认的正方形并插入圆圈来代替它。相反，我尝试为正方形赋予边界半径，但它没有给出圆形并使其成为椭圆形，它仍然存在于背景中。

标签： htmlcsstwitter-bootstrap

Answer 1

这是你想要的 -

ul.pagination li a {
  width: 10px;
  height: 10px;
  padding: 0;
  top: 10px;
  border-radius: 50%;
}

ul.pagination li:first-child a {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  line-height: 5px;
}

ul.pagination li:last-child a {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  line-height: 5px;
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
    <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
    <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
    <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
    <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
    <li><a href="#">»</a></li>
  </ul>
</div>