向 fieldset 元素添加边框时有没有办法获得完整边框？

发布于 2024-10-26 14:28:15 字数 469 浏览 5 评论 0原文

当我向 fieldset 元素添加边框，然后向下拖动 legend 以用作各种标题时，fieldset 中的间隙仍然存在。

有没有办法拥有整个边框，而不添加包装器 div 并在其上设置边框？

示例

Example

CSS

fieldset legend {
    position: relative;
    bottom: -40px; 
    background: transparent; 
}

jsFiddle。

原文

When I add a border to fieldset element and then drag the legend down to work as a heading of sorts, the gap in the fieldset remains.

Is there a way to have the entire border, without adding a wrapper div and setting the border on that?

Example

CSS

fieldset legend {
    position: relative;
    bottom: -40px; 
    background: transparent; 
}

jsFiddle.

分享到QQ

分享到微博

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

发布评论

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

神经暖 2024-11-02 14:28:16

将 position:relative 放在 fieldset 上并绝对定位图例：

fieldset {
    border: 2px dotted #333;   
    height: 340px;
    position: relative;
}

fieldset legend {
    position: absolute;
    top: 40px;
    left: 0;
    background: transparent; 
}

更新的小提琴：http://jsfiddle.net/ambigously/YHhPP/

这对我来说在 Gecko 和 WebKit 中呈现相同的方式，原始小提琴在 WebKit 中存在差距，但图例忽略了 Gecko 中的底部：-40px。

您还可以尝试浮动图例： http://jsfiddle.net/ambigously/Gwv4M/1/

fieldset {
    border: 2px dotted #333;   
    height: 340px;
}

fieldset legend {
    float: left;
    margin-top: 40px;
}

但 IE7 和 IE8 似乎也扼杀了这一点。

Put the position: relative on the fieldset and absolutely position the legend:

fieldset {
    border: 2px dotted #333;   
    height: 340px;
    position: relative;
}

fieldset legend {
    position: absolute;
    top: 40px;
    left: 0;
    background: transparent; 
}

Updated fiddle: http://jsfiddle.net/ambiguous/YHhPP/

This renders the same way in Gecko and WebKit for me, the original fiddle has the gap in WebKit but the legend is ignoring the bottom:-40px in Gecko.

You can also try floating the legend: http://jsfiddle.net/ambiguous/Gwv4M/1/

fieldset {
    border: 2px dotted #333;   
    height: 340px;
}

fieldset legend {
    float: left;
    margin-top: 40px;
}

But IE7 and IE8 seem to butcher that one too.

回复收藏 0 原文

只等公子 2024-11-02 14:28:16

为什么不直接保留图例标记并使用其他内容作为文件集中的标题。

回复收藏 0 原文

兮颜 2024-11-02 14:28:15

在 IE7/IE8 和最新版本的 Firefox、Chrome、Safari、Opera 中进行了测试。

它们看起来都一样，只是 IE7 在左侧添加了一点空格。

我必须添加一个无辜的小包装器span。

http://jsfiddle.net/thirtydot/ErZEj/

HTML：

<form>
    <fieldset>
        <legend><span>I am</span></legend>

        <div style="margin-top:80px">dsfsdf</div>

    </fieldset>
</form>

<强>CSS：

fieldset {
    border: 2px dotted #333;   
    height: 340px;
    position: relative
}
fieldset legend {
    position: absolute;
    top: 0;
    left: 0
}
legend span {
    position: absolute;
    left: 0;
    bottom: -60px;
    white-space: nowrap /* or define width */
}

Tested in IE7/IE8 and recent versions of Firefox, Chrome, Safari, Opera.

It looks the same in all of them, with the exception that IE7 is adding a little space on the left.

I had to add an innocent little wrapper span.

http://jsfiddle.net/thirtydot/ErZEj/

HTML:

<form>
    <fieldset>
        <legend><span>I am</span></legend>

        <div style="margin-top:80px">dsfsdf</div>

    </fieldset>
</form>

CSS:

fieldset {
    border: 2px dotted #333;   
    height: 340px;
    position: relative
}
fieldset legend {
    position: absolute;
    top: 0;
    left: 0
}
legend span {
    position: absolute;
    left: 0;
    bottom: -60px;
    white-space: nowrap /* or define width */
}

回复收藏 0 原文