html - 应用与 legend 标签相同的 CSS

Question

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

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 添加到与 background 匹配的 span -.temp 的颜色 和包含它的元素。这确保了 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>