logo标签列表

任何HTML元素都可以被样式化为fieldset/legend吗？

htmlcssfieldsetlegend
9

使用 display 属性，HTML 元素可以从样式的角度进行互换。然而，fieldset 和 legend 似乎不适用于这个规则。

是否可能使其他 HTML 元素的外观看起来像 fieldset 和 legend？

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>
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>

据我所知，没有办法实现legend元素在fieldset边框上造成的那种边框破裂效果。我认为仅使用CSS是不可能实现的，这只是由于fieldset标签的呈现方式所致。 澄清：我不知道有任何方法可以定位块或内联元素，使其跨越包含块元素的可见边框，然后导致容器元素的边框在其框后面被打破。这就是<legend>对其包含的<fieldset>元素边框所做的事情。
1
我的回答没有错，只是需要特定的条件才能运行。你会发现这通常是这种“诡计”的情况；几乎没有一种大小适合所有问题的解决方案。 - Victor Welling
他的问题是“如何将元素样式化为fieldset/legend对？”当您查看我提供的文档时，是否看到了两个相同的块？ - Jesse Dhillon
我真正想知道的是，是否有一种方法（使用CSS标准）可以获得fieldset/legend创建的确切效果，或者该效果是否仅针对fieldset/legend进行硬编码。由于它似乎确实是硬编码的，所以我接受了这个答案。 - Jakob
1
似乎HTML5规范明确定义了这些元素的呈现方式，很可能是为了符合 UA 已经在做的事情。还请参见：是否有任何标准（HTML 或 CSS）定义了<fieldset> + <legend> 上边框的“擦除”行为？ - jimp
2
当然，例如：一个带有边框的DIV元素和一个具有背景颜色设置的子标题元素，使其位置重叠在DIV的边框上，看起来就像是一个fieldset和legend。
非常基本的示例：
<div style="border: 1px solid #000">
    <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
1
只有在背景是纯色而非图片的情况下，这才看起来正确。 - Jesse Dhillon
除非将背景图像应用于子标题元素并将其与背景匹配，否则“True”。但是，这需要元素处于固定位置才能工作。 - Victor Welling
0

所以我修复了代码，使它看起来有点像legend标签（实际上就像legend标签一样）。

    <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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接