Html 是否有可能实现<；字段集>-不使用<；字段集>；标签？_Html_Css_Fieldset

Html 是否有可能实现<；字段集>-不使用<；字段集>；标签？

html css

Html 是否有可能实现<；字段集>-不使用<；字段集>；标签？,html,css,fieldset,Html,Css,Fieldset,我个人喜欢这个标签，因为它画了一个盒子，并把标签放在顶部，越过边界。像这样然而，字段集元素是用来组织的，在一般设计中使用它并不比在一般设计中使用表好多少。所以，我的问题是如何使用另一个标记获得相同的结果？必须在下删除边框（或使用任何其他标记），并且由于可能存在“复杂”的车身背景图像，因此我无法仅设置图例的背景色，以匹配下面的元素之一我希望它可以在没有JavaScript的情况下工作，但是CSS3和基于XML的格式（如SVG或XHTML）也可以。我相信您已经知道答案了您有两个选项，提供自己

我个人喜欢这个标签，因为它画了一个盒子，并把标签放在顶部，越过边界。像这样

然而，

字段集

元素是用来组织的，在一般设计中使用它并不比在一般设计中使用表好多少。所以，我的问题是如何使用另一个标记获得相同的结果？必须在

下删除边框（或使用任何其他标记），并且由于可能存在“复杂”的车身背景图像，因此我无法仅设置图例的

背景色

，以匹配下面的元素之一

我希望它可以在没有JavaScript的情况下工作，但是CSS3和基于XML的格式（如SVG或XHTML）也可以。

我相信您已经知道答案了

您有两个选项，提供自己的边框（这是大量不必要的工作）或放置带有遮挡边框的元素（问题是您只能使用纯色背景，但这可能没问题）

据我所知，你无法在每个浏览器上都很好地完成这项训练。不过我喜欢你的风格，这是正确的方法，但可能不是一个你能以令人满意的方式解决的问题

我对这些主题的总体看法是，您不应该尝试在web上做一些需要A）过度努力或B）一开始并不完全显而易见的标记解决方案的事情。网络有局限性，你最好给她做广告，而不是试图绕过这些局限性

所以我不得不问，有什么问题吗？

.fieldset{
边框：1px实心#ddd；
边缘顶部：1米；
宽度：500px；
}
.fieldset h1{
字体大小：12px；
文本对齐：居中；
}
.fieldset h1 span{
显示：内联；
边框：1px实心#ddd；
背景：#fff；
填充物：5px10px；
位置：相对位置；
顶部：-1.3em；
}


标题
内容

然而，这是为了组织表单，并将其用于一般设计这并不比用桌子来做游戏好多少总体设计

这是错误的。使用表格进行布局的主要问题是，几乎没有任何布局映射到表格数据。第二个问题是，那些没有映射到表格数据的都不是表格数据，而一些没有映射到表格数据的则不是。也就是说，标记的语义与页面的语义不匹配。此外，从实用角度看，表的布局机制通常会使自定义样式和只浏览文本变得痛苦或不可能

现在，fieldset显然有将表单字段分组的意图。选择一个元素作为其外观几乎总是一个标志，这是一个糟糕的选择。然而，对于这个特定的例子，我认为包含列表的fieldset+图例几乎没有缺点（事实上，我唯一能想到的是一个scaper，它天真地将fieldset解释为发送表单信号，然后浪费用户的时间以不同的方式枚举其内容；但我不知道有什么能真正做到这一点）。其主要原因是表单元素用于包含输入的功能和语义目的，而字段集从早期起就具有特殊的、不可复制的视觉效果。此外，如果字段集中的可视元素在任何方面都是功能性的，那么从语义上讲，字段集确实再次包含一组交互式小部件，这就是最初的观点

我的建议是，如果你想使用它。我不会，但不是因为语义上的考虑：我不喜欢依赖特效，也不喜欢形式而不是功能

不管怎样，这里有一些东西值得细细咀嚼：


测试
.fake_字段集{
边框：2个槽扣面；
边框顶部宽度：0；
左边距：2倍；
右边距：2px；
填充：.35em.625em.75em；
边缘顶部：1米；
位置：相对位置；
}
.假传奇{
边缘顶部：-1米；
}
.fake_legend.test1:：before{
位置：绝对位置；
排名：0；
左：-1px；
边框顶部：2个凹槽按钮面；
内容：“；
宽度：0.5em；
}
.fake_legend.test1:：after{
位置：绝对位置；
排名：0；
右：-1px；
边框顶部：2个凹槽按钮面；
内容：“；
宽度：80%；
}
.fake_fieldset.test2{
填充：0；
填充顶部：1px；/*无折叠边距*/
}
.fake_fieldset.test2.fake_fieldset.container{
保证金：0；
边界：0；
}
.fake_legend.test2{
显示：表格；
宽度：100%；
}
.fake_legend.test2 span{
显示：表格单元格；
}
.fake_legend.test2 span:第一个孩子{
宽度：0.5em；
}
.fake_legend.test2 span:第一个孩子+span{
宽度：0；/*单元格拉伸*/
}
.fake_legend.test2 span:第一个孩子，
.fake_legend.test2 span:最后一个孩子{
/*这段代码的其余部分留给读者作为练习*/
}
福巴
福巴
福巴

不，这真的不可能

当然，无论如何我都忍不住要尝试一下。我花了太多的时间在这上面，这就提出了一个“解决方案”，与我在同一时间的解决方案非常相似（他的

test1

）。但我的不需要固定宽度的“图例”

不过，这段代码显然有点像黑客，我不知道它在复杂的网站上运行得如何。我也同意Anonymous的观点，即使用字段集进行分组并不像使用表进行布局那样糟糕。字段集是为对元素进行分组而设计的，尽管在HTML中它们实际上只用于对表单控件进行分组

.fieldset{
边框：2个三面槽；
边界顶部：无；
填充：0.5em；
边缘：1米2倍；
}
.fieldset>h1{
字体：1em正常；
裕度：-1em-0.5em 0；
}
.fieldset>h1>span{
浮动：左；
}
.fieldset>h1:之前{
边框顶部：2个三面凹槽；
内容：''；
浮动：左；
保证金：0.5em2px 0-1px；
宽度：0.75em；
}
.fieldset>h1:之后{
边框顶部：2个三面凹槽；
内容：''；
显示：块；
高度：1.5em；
左：2px；
边距：0 1px 0；
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title><style type="text/css">

.fake_fieldset {
    border: 2px groove ButtonFace;
    border-top-width: 0;
    margin-left: 2px;
    margin-right: 2px;
    padding: .35em .625em .75em;
    margin-top: 1em;
    position: relative;
}

.fake_legend {
    margin-top: -1em;
}

.fake_legend.test1::before {
    position: absolute;
    top: 0;
    left: -1px;
    border-top: 2px groove ButtonFace;
    content: " ";
    width: 0.5em;
}

.fake_legend.test1::after {
    position: absolute;
    top: 0;
    right: -1px;
    border-top: 2px groove ButtonFace;
    content: " ";
    width: 80%;
}
.fake_legend.test1 div {
    z-index: 100;
    background: white;
    position: relative;
    float: left;
}


.fake_fieldset.test2 {
    padding: 0;
    padding-top: 1px; /* no collapsed margin */
}

.fake_fieldset.test2 .fake_fieldset.container {
    margin: 0;
    border: 0;
}

.fake_legend.test2 {
    display: table;
    width: 100%;
}

.fake_legend.test2 span {
    display: table-cell;
}

.fake_legend.test2 span:first-child {
    width: 0.5em;
}
.fake_legend.test2 span:first-child + span {
    width: 0; /* cells stretch */
}
.fake_legend.test2 span:first-child,
.fake_legend.test2 span:last-child {
    /* the rest of this code is left as an exercise for the reader */
}
</style></head><body>

<fieldset><legend>foo</legend>bar</fieldset>

<div class="fake_fieldset test1"><div class="fake_legend test1">foo</div>bar</div>

<div class="fake_fieldset test2"><div class="fake_legend test2"><span></span><span>foo</span><span></span></div><div class="fake_fieldset container">bar</div></div>

</body></html>