是否可以在不使用<fieldset>标签的情况下实现<fieldset>类效果？
zne*_*eak 51 html css fieldset
我个人喜欢这个<fieldset>标签,因为它如何绘制一个盒子并将<legend>它放在边框上方.像这样.
但是,该fieldset元素用于组织表单,并且将其用于一般设计并不比使用表格进行一般设计更好.所以,我的问题是...... 如何使用另一个标签获得相同的结果？边框必须在<legend>(或任何其他标签将被使用)下删除,并且因为可能存在"复杂的"身体背景图像,所以我不能仅设置background-color图例以匹配元素之一下.
我希望它能在没有JavaScript的情况下工作,但CSS3和基于XML的格式(如SVG或XHTML)都可以.
Mat*_*ens 45
.fieldset {
border: 1px solid #ddd;
margin-top: 1em;
width: 500px;
}
.fieldset h1 {
font-size: 12px;
text-align: center;
}
.fieldset h1 span {
display: inline;
border: 1px solid #ddd;
background: #fff;
padding: 5px 10px;
position: relative;
top: -1.3em;
}<div class="fieldset">
<h1><span>Title</span></h1>
<p>Content</p>
</div>- 正如你所指出的,我正在寻找一个永久的替换`<fieldset>`+`<legend>`组合,而不是代码适合一个精确的情况.我非常清楚这可能没有真正的解决办法,但我认为我最好还是要问.不过,你所做的很酷,并且在将来的某个时候可以派上用场.这不完全是我正在寻找的. (3认同)
mer*_*tor 21
不,这不可能.甚至浏览器制造商也在努力解决这个问题.
当然,无论如何我无法抗拒.我花了很多时间在那上面,Anonymous想出了一个与我的相似的"解决方案"(他的test1).但我的不需要固定宽度的"传奇".
不过,这段代码显然有些骇人听闻,我不知道它在复杂网站上的表现如何.我也同意Anonymous的说法,使用字段集进行分组并不像使用表格进行布局那么糟糕.字段集是为分组元素而设计的,尽管在HTML中它们实际上只应该用于分组表单控件.
.fieldset {
border: 2px groove threedface;
border-top: none;
padding: 0.5em;
margin: 1em 2px;
}
.fieldset>h1 {
font: 1em normal;
margin: -1em -0.5em 0;
}
.fieldset>h1>span {
float: left;
}
.fieldset>h1:before {
border-top: 2px groove threedface;
content: ' ';
float: left;
margin: 0.5em 2px 0 -1px;
width: 0.75em;
}
.fieldset>h1:after {
border-top: 2px groove threedface;
content: ' ';
display: block;
height: 1.5em;
left: 2px;
margin: 0 1px 0 0;
overflow: hidden;
position: relative;
top: 0.5em;
}<fieldset>
<legend>Legend</legend> Fieldset
</fieldset>
<div class="fieldset">
<h1><span>Legend</span></h1> Fieldset
</div>作为旁注,您可能还想查看HTML5 figure和figcaption元素.这些似乎是您的示例中使用的最佳元素.
但这只是针对问题的语义部分,因为我不认为这些元素与字段集/图例的呈现方式相同.更不用说当前的浏览器可能还不支持这些元素.
然而,它是为组织表单而制作的,而将它用于一般设计并不比使用表格进行一般设计更好
这是错误的.使用表格进行布局的主要问题是几乎没有布局映射到表格数据.第二个问题是,没有映射到表格数据的那些都不是表格数据,而其中一些不是表格数据.也就是说,标记的语义与页面的语义不匹配.此外,实际上,表的布局机制通常使自定义样式和纯文本浏览变得痛苦或不可能.
现在,fieldset显然有意为表单字段分组.选择一个外观元素几乎总是一个标志,这是一个糟糕的选择.然而,对于这个具体的例子,我认为包含列表的字段集+图例几乎没有缺点(事实上,我能想到的唯一一个是scaper,它天真地将字段集解释为表示一个表单,然后浪费用户的时间枚举它的内容不同;但我知道实际上没有做到这一点).这样做的主要原因是表单元素用于包含输入的功能和语义目的,而fieldset早期具有特殊的,不可再现的视觉效果.此外,如果fieldset中的可视元素以任何方式起作用,则在语义上,fieldset再次包含一组交互式小部件,这是原始点.
我的建议是,如果你愿意,可以使用它.我不会,但不是因为语义上的考虑:我不喜欢依赖特殊效果,而是避免形式优于函数.
无论如何,这里有一些可以咀嚼的东西:
<!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_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>这里有一个可能的解决方案，重点是简单性（如果您可以稍微放松对透明背景的要求）。没有额外的元素。
section {
border: 2px groove threedface;
padding: 1em;
}
section h2 {
float: left;
margin: -1.7em 0 0;
padding: 0 .5em;
background: #fff;
font-size: 1em;
font-weight: normal;
}<section id=foo>
<h2>
Foo
</h2>
bar
</section>