Question

我正在设计一些圆形引导标签标签，但是在它和边框之间有一个1px的空白区域，我似乎无法摆脱它。

我尝试从元素中删除padding，margin和border，但无济于事。

这是我在CSS中的样式：

.nav-tabs { border-bottom: none; }

.nav-tabs.circular li,
.nav-tabs.circular li a,
.nav-tabs.circular li img {
  border-radius: 50%;
  padding: 0;
  margin: 0;
  border: none;
}

.nav-tabs.circular li {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 2px solid transparent;
}

.nav-tabs.circular li.active {
  border-color: green;
}

.nav-tabs.circular li img {
  max-width: 100%;
  max-height: 100%;
}

Answer 1

您的问题来自bootstrap.css，请查看以下内容：

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
  border-width: 1px;
}

因此您需要设置为0，请参阅下面的代码段：

.nav-tabs {
  border-bottom: none;
}
.nav-tabs.circular li,
.nav-tabs.circular li a,
.nav-tabs.circular li img {
  border-radius: 50%;
  padding: 0;
  margin: 0;
  border: none;
}
.nav-tabs.circular li {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 2px solid transparent;
}
.nav-tabs.circular li.active {
  border-color: green;
}
.nav-tabs.circular li img {
  max-width: 100%;
  max-height: 100%;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border-width: 0 !important; /* !important for demo only */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs circular" id="myTab">
  <li class="active">
    <a href="#recent-match-1" data-toggle="tab">
      <img src="https://merkd.com/usr/members/icons/1458665993.1.png" alt="" />
    </a>
  </li>
  <li>
    <a href="#recent-match-2" data-toggle="tab" title="welcome">
      <img src="https://merkd.com/usr/members/icons/1458665993.1.png" alt="" />
    </a>
  </li>

</ul>

<div class="tab-content">
  <div class="tab-pane fade in active" id="recent-match-1">
    Recent match 1
  </div>
  <div class="tab-pane fade in" id="recent-match-2">
    Recent match 2
  </div>
  <div class="clearfix"></div>
</div>

围绕引导标签标签的1px空白区域

1 个答案: