应用 CSS 与图例标签相同

Question

我想在我的 html 组件周围创建一个边框。 HTML legend 元素可以使用，但我想在表格之外使用它。

HTML 图例：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset

我试过了，但是标题和边框有问题。下面是相同的jsfiddle。

.temp {
  border: 1px solid #999;
  margin-top: 20px;
  padding: 20px;
  position: relative;
}

http://jsfiddle.net/alpeshprajapati/a6a93fg9/1/

如何实现与图例相同的输出？谢谢

Answer 1

你差不多就在那里。使您的标记看起来像 legend 的最后一步是将 background-color 添加到 span 以匹配 .temp 的 background-color 和元素包含它。这确保 border 或 .temp 不会显示在文本后面（因为 background-color 默认为 transparent）。

.temp > span {
  background-color: white;
  font-size: 21px;
  left: 2%;
  position: absolute;
  top: -15px;
}
.temp {
  border: 1px solid #999;
  margin-top: 20px;
  padding: 20px;
  position: relative;
}

<div class="temp">
  <span>Permissions</span>
  <table class="table cs-table-no-bordered table-striped">
    <thead>
      <tr>
        <th>Modules</th>
        <th class="text-center">Edit</th>
        <th class="text-center">Delete</th>
        <th class="text-center">View</th>
        <th class="text-center">All</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>M1</td>
        <td class="text-center">
          <input type="checkbox" />
        </td>
        <td class="text-center">
          <input type="checkbox" />
        </td>
        <td class="text-center">
          <input type="checkbox" />
        </td>
        <td class="text-center">
          <input type="checkbox" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

应用 CSS 与图例标签相同

Apply CSS same as legend tag

html

css

legend