Question

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

虽然，我已宣布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;
}

小提琴Here

Answer 1

正如您在my fiddle中所看到的，您所要做的就是更改可列表margin-bottom: -1px;代码的li。

它们会覆盖您的.tab-content，因此现在只显示顶部边框，因为li的白色背景位于边框上方。将它们向上移动以获得该间距像素，您可以看到边框。

无法为制表符内容设置border-top

1 个答案: