如何在带边框的字段集中安排传奇?

根据互联网上的几个链接,不可能放置传奇。 因此,他建议将其从范围内包装:


<legend><span>Foo</span></legend>


然后我们可以安排该组字段内的跨度。 但是,当我想在该组字段中添加边框时,出现图例的间隙。 幸运的是,我发现图例中的边界的增加也纠正了这个小小的空间,但这是一个丑陋的解决方案 /像其他一切一样 css/. 您对此问题有更多明智的解决方案吗?

注意:我在我开始写这个问题后的同时找到了一个解决方案,所以我仍然想问他。
已邀请:

快网

赞同来自:

我发现那简单
float:left

为了
LEGEND

做这项工作。

样本 Codepen:
http://codepen.io/vkjgr/pen/oFdBa

卫东

赞同来自:

我知道这是一个古老的问题,但我在谷歌时得到了这个页面 "fieldset legend position", 我真的找不到一个很好的答案。

传说根本不会表现!因此,我发现的最佳解决方案是将其定位绝对并在现场集中填充顶点。 JSFildle 例子:
http://jsfiddle.net/carlosmartinezt/gtNnT/356/
/


fieldset {
position:relative;
padding-top:50px;
}

legend {
position:absolute;
top:20px;
left:18px;
}​

小明明

赞同来自:

使用大纲而不是边框​​:
http://jsfiddle.net/leaverou/gtNnT/
/

小明明

赞同来自:

OP 几乎回答了他自己的问题:包装是一个伎俩,但相反是相反的。 利用:


<span><legend>Foo</legend></span>

诸葛浮云

赞同来自:

安装定位字段。 它有效地没有问题。


legend {margin-left:50px;} /* 50px from Left of the Fieldset */

郭文康

赞同来自:

您可以使用 margin-bottom "-50px"对于传说I. padding-top "50px" 对于一组字段,使他们不重叠。


fieldset { 
padding-top:50px;
}

fieldset legend {
margin-bottom:-50px;
}

奔跑吧少年

赞同来自:

它似乎更加简单。


fieldset legend { 
position:relative;
left:20px;
}

风见雨下

赞同来自:

发现它最符合最符合的测试 IE7, Firefox 和 Chrome


fieldset legend 
{
text-align:left;
}

卫东

赞同来自:

结果,我只使用了物品 div. 最后,我只需要国外边境和文本,就是这样。

二哥

赞同来自:

我认为它会有效


<legend><span>ur text</span></legend>


给出传奇标签的边界


legend {padding: 2px;border: 1px solid green;}

要回复问题请先登录注册