0

IE6と7を除いて、テストしたすべてのブラウザーで正常に表示される動的に生成されたフォームがあります。フォーム入力の上または横に配置できるはずの見出しがあります。ラジオボタンとチェックボックスの場合は、ラベルの左側にコントロールが必要です。他のすべての入力の場合は、右側にコントロールが必要です。HTMLは両方で同じである必要があり、CSSのみが変更されます。

（）ラジオ1（）ラジオ2
[]チェックボックス1[]チェックボックス2
テキスト|____________|
等

また

ラジオ1ラジオ2
（）（）
チェックボックス1チェックボックス2
[] []
文章
| ____________ |
等

これまでのところ私は持っています

<span class="control">
  <label for="a1" class="forbutton">A1</label>
  <input type="checkbox" id="a1" class="form-input-checkbox" name="a" value="1"/>
</span>

または各入力に類似したもの。CSSは

.forbutton {
  margin-bottom: 0.20em;
  float: right;
}
.control {
  display: inline-block;
  vertical-align: text-top;
  position: relative;
}

/* Only if you want labels above inputs */
.form-input-checkbox,
.form-input-radio {
  display: block;
  clear: both;
}

IE6および7では、<span>は、コンテンツの幅を取得するのではなく、100％の幅になります（IE8を含む他のブラウザーの場合と同様）。どうすればこれを簡単に修正できますか？スパンに幅を指定すると修正されますが、ラベルは動的に生成されるため、どのくらいの幅にする必要があるかわかりません。

目標： HTMLコードに入力する前の
有効なHTML
有効なCSS ラベル上のラベルと横のラベルに同じHTMLコード

同じ結果を達成するソリューションは、ありがたいことに受け入れられます。

4

1 に答える 1

0

そのスパンで「display:inline-block」を取り除くことをお勧めします。IE7 以前のバージョンでは認識されません。さらに、この例では、その要素にある他のスタイルは、実際にはインライン ブロックの使用を保証しません。Span はデフォルトでインラインになっています。そのままにしておきます。

于 2012-08-23T06:42:51.753 に答える