应用与图例标签相同的 CSS

Posted 2023-02-16

【中文标题】应用与图例标签相同的 CSS

【英文标题】：Apply CSS same as legend tag

【发布时间】：2015-10-22 22:35:20

【问题描述】：

我想在我的 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/

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

【问题讨论】：

将background-color: white; 添加到.temp > span 会得到您想要的结果吗？ jsfiddle.net/a6a93fg9/3

伟大的@HiddenHobbes .. 谢谢:)

没问题，因为这就是我创建一个更详细的答案之后的样子。

【参考方案1】：

你几乎在那里。使您的标记看起来像legend 的最后一步是将background-color 添加到与.temp 的background-color 匹配的span 以及包含它的元素。这可确保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>