Question

选中此fiddle

我想知道如何在不影响正文的情况下向标题添加边框，反之亦然。

.content-box {
  border: 1px solid #cfcfcf;
  background: #ebebeb;
}

.content-box-header {
  background: #202020;
  color: #fff;
  padding: 5px;
}

<div id="content" style="max-width: 330px;">
  <div class="content-box">
    <div class="content-box-header">
      Chocolate Bar
    </div>
    <ul>
      <li>PHP</li>
      <li>HTML</li>
    </ul>
  </div>
</div>

Answer 1

我会把它分解成更多的碎片。下面我把它分成标题，正文和内容框。从这里开始，只需为身体指定一个边框，为头部指定另一个边框。从整个父项中删除边框定义应该修复它。

＆＃13;

.cbox-body {
  background: #ebebeb;
  border: 1px solid #cfcfcf;
}
.content-box-header {
  background: #202020;
  border: 1px solid red;
  color: #fff;
  padding: 5px;
}
#content{
  max-width:330px;
}

＆＃13;

<div id="content">
  <div class="content-box">
    <div class="content-box-header">
      <p>Chocolate Bar</p>
    </div>
    <div class="cbox-body">
      <ul>
        <li>PHP</li>
        <li>HTML</li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

Answer 2

只需使用标题类的边框

  .content-box {
      background: #ebebeb; 
      border: 1px solid #cfcfcf;
  }

  .content-box-header {
      border: 1px solid #colorcode;
      background: #202020;
      color: #fff;
      padding: 5px;
  }

我希望它会有所帮助。

标题的边框颜色不影响正文

2 个答案: