0

私が欲しいのは、各ラジオボタンセットのフィールド名が柔軟で、たとえば10〜30文字の範囲である可能性があることですが、1行目と2行目のラジオボタンの位置は次のように揃える必要があります。また、ラジオボタンの名前が変更される可能性があるため、ラジオボタンの名前が変更されても配置を維持する方法があります。ドイツ語の最大値は4文字（「Nein」）と2文字（「Ja」）で、英語の場合は数字が異なるようです。

では、IEには、最初の行と2番目の行の間のラジオボタンの配置を維持し、フィールド名も配置する一般的な方法がありますか？良い例を以下に示します。

ここに画像の説明を入力してください

私がcssスタイルシートで行ったことは、上記のスタイリングを試みることですが、各フィールド名の前の固定長のスペースとしてのインデントにより、ラジオボタンの位置がずれています。以下は私の現在のコード結果です：

私の現在のコード

私のCSSコード

.sRRBA { font-family:Arial;color:#000000;font-size:9pt; margin-left:190px }
.sRRBJ { font-family:Arial;color:#000000;font-size:9pt; margin-left:190px }
.sRRCI { font-family:Arial;color:#000000;font-size:9pt; margin-left:190px }
.sRRDH { font-family:Arial;color:#000000;font-size:9pt; margin-left:190px }

ソースのHTMLコードを表示

<span class="sRRBA">Customer Marketing Permission Postal Address</span>



               <input type="radio" name="" value="N" />
               <span class="readonlytext">No</span>

               <input type="radio" name="" value="Y" />
               <span class="readonlytext">Yes</span>

         <span class="sRRBJ">Customer Marketing Permission Telephone</span>



               <input type="radio" name="" value="N" />
               <span class="readonlytext">No</span>

               <input type="radio" name="" value="Y" />
               <span class="readonlytext">Yes</span>

         <span class="sRRCI">Customer Marketing Permission Mobile Phone</span>



               <input type="radio" name="" value="N" />
               <span class="readonlytext">No</span>

               <input type="radio" name="" value="Y" />
               <span class="readonlytext">Yes</span>

         <span class="sRRDH">Customer Marketing Permission Email</span>



               <input type="radio" name="" value="N" />
               <span class="readonlytext">No</span>

               <input type="radio" name="" value="Y" />
               <span class="readonlytext">Yes</span>


      </div>
4

2 に答える 2

0

個人的には、各列に幅を与え、表示タイプをインラインブロックに設定するクラスを作成します。次に、列を分割し、そのクラスを作成したばかりの「列」クラスに設定します。

于 2012-09-07T15:17:36.387 に答える
0

これを行うにはいくつかの方法があります。ここに2つあります。

各列を独自のタグに配置すると、各列が左にフロートされ、インライン ブロックを表示するように設定されます。次に、各列が整列します。例えば：

.topcontainer {
    display: inline-block;
    overflow: hidden;
}
.ecolumn {
    float: left;
    margin-right: 6px;
 }

<div class="topcontainer">
    <div class="ecolumn">
        <div>Line1</div>
        <div>Line2</div>
    </div>
    <div class="ecolumn">
        <div><input...></div>
        <div><input...></div>
    </div>
</div>

このアプローチの問題は、行の高さが異なる場合、垂直方向に整列しないことです。div 要素に明示的な高さを設定することで、これを回避できます。スクリーン ルームがある場合は、そこに改行なしスペース ( ) を挿入して、フォントの高さを揃えることもできます。高さを 1em に設定して、使用中のフォントの高さに合わせることもできます。

テーブルを使用することもできます。これは、幅と高さを指定せずに行と列の両方を完全に整列させる唯一の方法です。テーブルには、スクリーン リーダーなどのコンテンツ コンシューマを混乱させるなど、他にも問題があるため、それはあなた次第です。

<table>
    <tbody>
        <tr>
            <td>Line1</td>
            <td><input...></td>
        </tr>
        <tr>
            <td>Line2</td>
            <td><input...></td>
        </tr>
    </tbody>
</table>

編集：

あなたのコメントに応えて、あなたが何を探しているのか正確にはわからないので、ここにいくつかの一般的な情報があります.

HTML テーブルは、何らかの方法で幅を設定しない限り、常に必要最小限のスペースしか取りません。テーブルの幅を設定し、左側の列を 100% の幅に設定して、探している効果を得ることができます。また、最初の列のみにピクセル幅を設定することも、左の列に配置する項目に右余白を設定して、セル内でより多くのスペースを占めるようにすることもできます。他の方法もあります。それはすべて、探している効果によって異なります。

また、表の各セルにスタイルを設定して、内容を左、右、中央、上、下、中央に揃えることができます。

于 2012-09-07T15:34:41.753 に答える