0

ヘッダーとそれにインラインで表示される内容を制御するいくつかのラジオボタンがある状況があります。スタイル上の理由から、ヘッダーの下の境界線を、次の要素を介してコンテナーの端まで拡張する必要があります。

今の私の状況：

<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/

下の境界線をページ全体に拡張する方法はありますか？

4

3 に答える 3

1

要素を使用してdivすべてをラップするだけです。これが例です。

ラッピングを使用すると、div以前に使用していたすべてのクラスを削除できることに注意してください。forまた、要素の属性にlabelは対応するIDが必要であることに注意してください。

上記でリンクしたフィドルの例で、これらの問題をすべて修正しました。

于 2013-01-21T20:14:53.110 に答える
1

h1とオプションの周りにコンテナ要素を追加できませんでしたか？

例えば：

<div class="border-bottom">
...
</div>

div.border-bottom{
border-bottom: 1px solid blue;   
}

http://jsfiddle.net/TB8dK/1/

また

display: inline-block;すべての要素に静的な高さを 使用して設定できます。http://jsfiddle.net/yLUC7/5/

（ラベルのテキストを垂直方向に揃えるために「line-height」を使用していることに注意してください）

于 2013-01-21T20:16:38.047 に答える
1

まず、要素を配置する場所に応じて、すべての要素をdivまたは別のタグ内にラップする必要があります。私の例では、<header>タグを使用しました。また、使い勝手が良く、文字をクリックしても確認できるので、<input>中に入れることをお勧めします。<label>

ここで私の変更を見ることができます

于 2013-01-21T20:17:01.667 に答える