将.panel与FIELDSET和.panel-heading与LEGEND结合使用时的设计问题

时间:2015-03-25 14:54:24

标签: html css twitter-bootstrap accessibility

出于辅助功能的原因,我需要将fieldsetlegend添加到Bootstrap的.panel元素中。但遗憾的是,legend无法正确设置样式:fieldset周围的边框只能达到中间高度!

screenshot

Codepen:http://codepen.io/jmuheim/pen/ByMVwY

任何人都知道如何使fieldset.panel-heading外观与div.panel-heading完全相同?

2 个答案:

答案 0 :(得分:2)

您可以向legend标记添加左侧浮动。由于宽度已设置为100%,因此不应导致任何问题

http://codepen.io/anon/pen/LEqrBR

legend.panel-heading {
    font-size: 14px;
    margin-bottom: 0;
    float: left;
}

我在Mac上检查了这个和Chrome,看起来很好。要获得正文部分的间距,可以为legend标记添加边距。例如

margin-bottom: 10px;

http://codepen.io/anon/pen/dPaKgv

答案 1 :(得分:-2)

昨天我尝试过类似的东西。这篇文章可能会有你需要的内容。

Use Fieldset Legend with bootstrap