8

使用该display属性，从样式的角度来看，HTML 元素变得可互换。fieldset然而，对于和来说，情况似乎并非如此legend。

是否可以将其他 HTML 元素设置为看起来像fieldset和legend？

4

4 回答 4

4

这工作得很好，但如果背景是图像，ie6 会表现得有点奇怪，条件注释无法解决任何问题。在 IE6-8、FF3.6、Safari 5、Chrome 5 中测试

.fieldset {
    position: relative;
    border: 1px solid #000;
    margin: 20px;
    padding: 20px;
    text-align: left;
}

.fieldset .legend {
    background: #fff;
    height: 1px;
    position: absolute;
    top: -1px;
    padding: 0 20px;
    color: #000;
    overflow: visible;
}

.fieldset .legend span {
    top: -0.5em;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    overflow: visible;
}


   <div class="fieldset">
      <div class="legend">
         <span>This is the title</span>
      </div>
      Test
   </div>
于 2010-07-18T03:26:17.820 回答
3

前面的答案是不正确的，如果你想看看为什么试试这个：

<body style="background-color: #f00">
  <div style="border: 1px solid #000">
      <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
  </div>
  <fieldset><legend>Foobar</legend></fieldset>
</body>

AFAIK 没有办法产生legend元素在fieldset' 的边界上引起的边界中断效果。我不相信单独使用 CSS 是可能的，它只是fieldset标签呈现方式的一部分。

澄清：我不知道有什么方法可以定位块或内联元素，使其跨越其包含块元素的可见边框，然后导致容器元素的边框在其框后面被打破。这就是 a<legend>对其包含<fieldset>元素的边框所做的。

于 2010-07-17T10:35:32.730 回答
2

当然，例如：具有边框的 DIV 元素和具有与 DIV 的边框重叠的背景颜色集的子标题元素看起来就像一个字段集和图例。

非常基本的例子：

<div style="border: 1px solid #000">
    <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
于 2010-07-17T10:20:20.683 回答
0

所以我修复了代码，使它看起来有点（它真的看起来像图例标签）像图例标签。

    <div style="border: 2px groove #ccc">
    <h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1>
</div>
  <fieldset><legend>Foobar</legend></fieldset>
于 2015-06-12T21:14:30.067 回答