79

ラジオボタン/チェックボックスをテキストに正しく合わせるための最もクリーンな方法は何ですか?私がこれまで使用してきた唯一の信頼できるソリューションは、テーブルベースです。

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

これは一部の人に眉をひそめるかもしれません。テーブルレスソリューションの調査に(再び)時間を費やしましたが、失敗しました。フロート、絶対/相対ポジショニング、および同様のアプローチのさまざまな組み合わせを試しました。ラジオボタン/チェックボックスの推定高さにほとんど黙って依存しているだけでなく、ブラウザによって動作も異なります。理想的には、サイズや特別なブラウザの癖について何も想定していない解決策を見つけたいと思います。テーブルを使用しても問題ありませんが、別の解決策はどこにあるのでしょうか。

4

13 に答える 13

122

私はついに問題を解決したと思います。一般的に推奨される解決策の 1 つは、vertical-align: middle: を使用することです。

<input type="radio" style="vertical-align: middle"> Label

ただし問題は、理論的には機能するはずであるにもかかわらず、目に見えるずれが生じることです。CSS2 仕様には次のように書かれています。

vertical-align: middle:ボックスの垂直方向の中点を、親ボックスのベースラインに親ボックスの x 高さの半分を加えた値に揃えます。

したがって、完全な中心にある必要があります (x の高さは文字 x の高さです)。ただし、この問題は、ブラウザがラジオ ボタンとチェックボックスにランダムで不均一な余白を追加することが一般的であるという事実によって引き起こされているようです。たとえば、Firebug を使用する Firefox で、Firefox のデフォルトのチェックボックスのマージンが であることを確認できます3px 3px 0px 5px。どこから来たのかはわかりませんが、他のブラウザも同様のマージンを持っているようです。したがって、完全に整列させるには、これらの余白を取り除く必要があります。

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

テーブルベースのソリューションでは、マージンが何らかの形で消費され、すべてがうまく整列していることに注意することは、依然として興味深いことです。

于 2009-05-20T21:55:12.630 に答える
31

以下は、Firefox と Opera で機能します (申し訳ありませんが、現時点では他のブラウザーにアクセスできません)。

<div class="form-field">
    <input id="option1" type="radio" name="opt"/>
    <label for="option1">Option 1</label>
</div>

CSS:

.form-field * {
    vertical-align: middle;
}
于 2008-12-28T18:35:43.760 に答える
14

ラベル、divなどを追加する必要がないため、これを行うための最良かつ最も簡単な方法が見つかりました。

input { vertical-align: middle; margin-top: -1px;}

于 2010-10-28T15:02:15.243 に答える
7

これにはテーブルをまったく使用しません。CSSはこれを簡単に行うことができます。

私はこのようなことをします:

   <p class="clearfix">
      <input id="option1" type="radio" name="opt" />
      <label for="option1">Option 1</label>
   </p>

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

注:私は次のclearfixクラスを使用しました:http ://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
于 2008-12-28T18:07:00.497 に答える
4

これはちょっとしたハックですが、この CSS は、テーブルを使用する場合と同じように (クロムを除く)、すべてのブラウザーで非常にうまく機能するようです。

input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
 input[type=radio] { margin-top: -2px; }
}

ラジオが機能するように、必ずラベルを使用してください。すなわち

<option> <label>My Radio</label>
于 2009-07-08T22:34:08.853 に答える
3

ラベルが長く、複数の行にまたがる場合は、幅と display:inline-block を設定すると役立ちます。

.form-field * {
  vertical-align: middle;
}
.form-field input {
  clear:left;
}
.form-field label { 
  width:200px;
  display:inline-block;
}

<div class="form-field">
    <input id="option1" type="radio" name="opt" value="1"/>
    <label for="option1">Option 1 is very long and is likely to go on two lines.</label>
    <input id="option2" type="radio" name="opt" value="2"/>
    <label for="option2">Option 2 might fit into one line.</label>
</div>
于 2011-01-09T13:07:07.710 に答える
2

次のコードは機能するはずです:)

よろしく、


<style type="text/css">
入力[タイプ=チェックボックス] {
    margin-bottom: 4px;
    垂直整列: 中央;
}

ラベル {
    垂直整列: 中央;
}
</style>


<input id="checkBox1" type="checkbox" /><label for="checkBox1">アセットを表示</label><br />
<input id="checkBox2" type="checkbox" /><label for="checkBox2">検出器を表示</label><br />
于 2011-04-19T19:20:46.187 に答える
2

これに対する最善の修正は、入力にラベルと一致する高さを与えることであることがわかりました。少なくとも、これで Firefox と IE の不一致に関する問題が解決されました。

input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }

<li>
  <input id="option1" type="radio" name="opt" />
  <label for="option1">Option 1</label>
</li>
于 2010-10-21T23:38:46.727 に答える
1

Below I will insert a checkbox dynamically. Style is included to align the checkbox and most important to make sure word wrap is straight. the most important thing here is display: table-cell; for the alignment

The visual basic code.

'the code to dynamically insert a checkbox

Dim tbl As Table = New Table()
Dim tc1 As TableCell = New TableCell()
tc1.CssClass = "tdCheckTablecell"

'get the data for this checkbox
Dim ds As DataSet
Dim Company As ina.VullenCheckbox
Company = New ina.VullenCheckbox
Company.IDVeldenperScherm = HETid
Company.IDLoginBedrijf = HttpContext.Current.Session("welkbedrijf")
ds = Company.GetsDataVullenCheckbox("K_GetS_VullenCheckboxMasterDDLOmschrijvingVC") 'ds6

'create the checkbox

Dim radio As CheckBoxList = New CheckBoxList
radio.DataSource = ds
radio.ID = HETid
radio.CssClass = "tdCheck"
radio.DataTextField = "OmschrijvingVC"
radio.DataValueField = "IDVullenCheckbox"
radio.Attributes.Add("onclick", "documentChanged();")
radio.DataBind()

'connect the checkbox

tc1.Controls.Add(radio)
tr.Cells.Add(tc1)
tbl.Rows.Add(tr)

'the style for the checkbox

input[type="checkbox"] {float: left;   width: 5%; height:20px; border: 1px solid black; }

.tdCheck label {     width: 90%;display: table-cell;    align:right;}

.tdCheck {width:100%;}

and the HTML output

<head id="HEAD1">
    <title>
        name
    </title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /><meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />
</head>
<style type='text/css'>
input[type="checkbox"] {float: left;   width: 20px; height:20px;  }
.tdCheck label {     width: 90%;display: table-cell;    align:right;}
.tdCheck {width:100%;}
.tdLabel {width:100px;}
.tdCheckTableCell {width:400px;}
TABLE
{

vertical-align:top;
border:1;border-style:solid;margin:0;padding:0;border-spacing:0;
border-color:red;
}
TD
{
vertical-align:top; /*labels ed en de items in het datagrid*/
border: 1;  border-style:solid;
border-color:green;
    font-size:30px  }
</style>
<body id="bodyInternet"  > 
    <form name="Form2" method="post" action="main.aspx?B" id="Form2">
        <table border="0">
            <tr>
                <td class="tdLabel">
                    <span id="ctl16_ID{A}" class="DynamicLabel">
                        TITLE
                    </span>
                </td>
                <td class="tdCheckTablecell">
                    <table id="ctl16_{A}" class="tdCheck" onclick="documentChanged();" border="0">
                        <tr>
                            <td>
                                <input id="ctl16_{A}_0" type="checkbox" name="ctl16${A}$0" />
                                <label for="ctl16_{A}_0">
                                    this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp  
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_1" type="checkbox" name="ctl16${A}$1" />
                                <label for="ctl16_{A}_1">
                                    ITEM2
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}$2" />
                                <label for="ctl16_{A}_2">
                                    ITEM3
                                </label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</form>
</body>

于 2013-01-06T07:21:33.757 に答える
1

それを実装するには、いくつかの方法があります。

  1. ASP.NET 標準チェックボックスの場合:

    .tdInputCheckBox
    { 
    position:relative;
    top:-2px;
    }
    <table>
            <tr>
                <td class="tdInputCheckBox">                  
                    <asp:CheckBox ID="chkMale" runat="server" Text="Male" />
                    <asp:CheckBox ID="chkFemale" runat="server" Text="Female" />
                </td>
            </tr>
    </table>
    
  2. DevExpress チェックボックスの場合:

    <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
    <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>
    
  3. RadioButtonList の場合:

    <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
       <asp:ListItem>Yes</asp:ListItem>
       <asp:ListItem>No</asp:ListItem>
    </asp:RadioButtonList>
    
  4. 必須フィールドバリデータの場合:

    <asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="reqEmailId" runat="server" ErrorMessage="Email id is required." Display="Dynamic" ControlToValidate="txtEmailId"></asp:RequiredFieldValidator>
    <asp:RegularExpressionValidator ID="regexEmailId" runat="server" ErrorMessage="Invalid Email Id." ControlToValidate="txtEmailId" Text="*"></asp:RegularExpressionValidator>`
    
于 2011-11-29T21:25:35.920 に答える
1

@sfjedi

クラスを作成し、それに css 値を割り当てました。

.radioA{
   vertical-align: middle;
}

それは機能しており、以下のリンクで確認できます。 http://jsfiddle.net/gNVsC/ お 役に立てば幸いです。

于 2013-08-22T10:42:23.990 に答える
1

これは私にとって問題を解決した簡単な解決策です:

label 
{

/* for firefox */
vertical-align:middle; 

/*for internet explorer */
*bottom:3px;
*position:relative; 

padding-bottom:7px; 

}
于 2011-06-21T08:27:19.893 に答える