0

そのため、最近、ブラウザーのサポート ポリシーを Windows 7 の IE 8 / 9、Firefox、Chrome、および Safari に変更しました。これらはすべてbox-sizing: border-box;、何らかの形でサポートされています (たとえば、プレフィックスが必要なものもあります-moz-)。これにより、幅 21em のラベルと右マージン 1em を使用して幅 45em のフォームを作成し (ラベルと関連する入力/選択の間に少しのスペースを作成するため)、選択/テキスト入力を 23em に設定できます。テキストエリアは 45em で、ボタンを右から右に揃えるテキスト配置の div を使用します。ブラウザ固有の微調整は必要なく、フォームは完全に整列します!

しかし、新しいプロジェクトを開始した昨夜、問題に行き詰まりました。この手法を使用しましたが、機能させることができませんでした。入力はすべて次の行にドロップダウンしていました。私は最終的に問題の原因が何であるかを突き止めましたが、それを修正する (私が好きな) 方法を見つけることができません。これは私が使用しているマークアップです:

<div class="input-pair">
    <label for="mainBackgroundColor">Background Colour</label>
    <input type="text" id="mainBackgroundColor" name="mainBackgroundColor" class="text color">
</div>

読みやすくするために使用しているキャリッジ リターンとタブがスペースに変換されていることがわかりました。したがって、ラベルと入力の実際の合計幅は 21em + 1em + 23em + スペース、つまり 45em + スペースですが、コンテナは 45em しかありません。CSS の空白にさまざまな値を試してみましたが、うまくいきませんでした。ラベルと入力をコードの同じ行に配置したくありません。見栄えが悪く、読みにくくなります。この新しい行とタブがスペースに置き換えられないようにする方法を知っている人はいますか?

4

1 に答える 1

1

これについての素晴らしい記事があります: Fighting the Space Between Inline Block Elements .

于 2013-03-23T13:59:17.893 に答える