html - 无法为选项卡内容设置边框顶部

Question

我无法为 tab-content 类设置 border-top。

不过，我已经声明了border-top。它没有设置。

HTML

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

CSS

.tab-content {
  border-top: 0.1em solid rgb(221, 219, 219);
  border-bottom: 0.1em solid rgb(221, 219, 219);
  border-right: 0.1em solid rgb(221, 219, 219);
  border-left: 0.1em solid rgb(221, 219, 219);
  width: 500px;
  padding: 2%;
  background-color: white;
  border-radius: 15px;
}

.nav-tabs {
  border-bottom: none;
  margin-bottom: 0;
  margin-left: 20px;
  margin-top: 25px;
}

fiddle Here

Answer 1

正如您在 my fiddle 中看到的那样您所要做的就是更改 margin-bottom: -1px; 您的制表符 li 标签。

它们覆盖了您的 .tab-content，因此顶部边框现在刚刚显示，因为 li 的白色背景在边框上方。将它们向上移动到那个间距像素，您可以看到边框。