ヘッダーとそれにインラインで表示される内容を制御するいくつかのラジオボタンがある状況があります。スタイル上の理由から、ヘッダーの下の境界線を、次の要素を介してコンテナーの端まで拡張する必要があります。
今の私の状況:
<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/
下の境界線をページ全体に拡張する方法はありますか?