当前位置：文江博客话题详情

任何 HTML 元素都可以设置为字段集/图例吗？

发布于 2024-09-10 10:32:54 字数 197 浏览 5 评论 0原文

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

是否可以将其他 HTML 元素设置为类似于 fieldset 和 legend 的样式？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世界和平 2024-09-17 10:32:54

这工作得很好，但是如果背景是图像，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>

This works pretty good, but ie6 will act a bit strange if the background is an image, nothing a conditional comment couldn't fix. Tested in 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>

回复收藏 0 原文

近箐 2024-09-17 10:32:54

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

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

据我所知，没有办法在 fieldset' 上产生 legend 元素导致的边界破坏效果。的边界。我不认为单独使用 CSS 是可能的，它只是 fieldset 标记呈现方式的一部分。

澄清：我不知道有什么方法可以定位块或内联元素，使其横跨其包含块元素的可见边框，然后导致容器元素的边框在其框后面被破坏。这就是

对其包含的

元素的边框所做的事情。

The previous answer is incorrect, if you want to see why try this:

<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 there is no way to have that border-disruption effect that the legend element causes on the fieldset's border. I don't believe that is possible with CSS alone, it's just something that is part of the way the fieldset tag is rendered.

Clarification: I don't know of any way to position a block or inline element such that it straddles the visible border of its containing block element, and then causes the container element's border to be broken behind its box. That's what a <legend> does to the border on its containing <fieldset> element.

回复收藏 0 原文

你的背包 2024-09-17 10:32:54

当然，例如：带有边框的 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>

Sure, for example: a DIV element with a border and a child heading element with the background color set positioned to overlap the DIV's border would look just like a fieldset and legend.

Very basic example:

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

回复收藏 0 原文

疯了 2024-09-17 10:32:54

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

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

So I fixed the code so that it looks somewhat (It really look like the legend tag) like the legend tag.

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

回复收藏 0 原文

~没有更多了~