html - 跨多个内联元素扩展底部边框

Question

在我的情况下，我有一个标题和一些与其内联的单选按钮，用于控制下面显示的内容。出于样式原因，我希望页眉的底部边框通过以下元素延伸到其容器的边缘。

我目前的情况:

<h2 class="header">this is the header</h2>

<label class="l" for="a">this is a label</label>
<input value="a" name="options" type="radio"/>

<label class="l" for="b">this is another label</label>
<input type="radio" name="options" value="b"/>

CSS:

label.l{
    display: inline-block;
    margin: 4px;
    color: red;
}

h2.header {
    border-bottom: 1px solid blue;
    display: inline;
    margin: 4px;
    font-size: 200%;
}

结果:http://jsfiddle.net/F7pzd/1/

有没有办法让底部边框一直延伸到整个页面？

Answer 1

只需使用一个 div 元素来包装所有内容。这是 an example .

请注意，通过使用包装 div，您可以摆脱之前使用的所有类。另请注意，label 元素的 for 属性需要相应的 ID。

我已经在上面链接的 fiddle 示例中修复了所有这些问题。