web-dev-qa-db-ja.com

HTML / CSSのラジオ/チェックボックスの配置

ラジオボタン/チェックボックスをテキストと適切に整列させる最もクリーンな方法は何ですか？これまで使用してきた唯一の信頼できるソリューションは、テーブルベースです。

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

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

htmlcsscheckboxradio-button
78
Jan Zich

私はついに問題を解決したと思います。一般的に推奨される解決策の1つは、垂直方向の配置を使用することです。

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

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

vertical-align：middle：ボックスの垂直中点を親ボックスのベースラインに親のx-heightの半分を加えた位置に合わせます。

したがって、完全な中心にある必要があります（x-heightは文字xの高さです）。ただし、この問題は、ブラウザーがラジオボタンやチェックボックスにランダムな不均等なマージンを追加することが多いために発生しているようです。たとえば、Firebugを使用するFirefoxでは、Firefoxのデフォルトのチェックボックスマージンが3px 3px 0px 5pxであることを確認できます。どこから来たのかはわかりませんが、他のブラウザにも同様のマージンがあるようです。したがって、完璧なアライメントを得るには、これらのマージンを取り除く必要があります。

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

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

119
Jan Zich

以下は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;
}
31
sids

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

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

13
Dario

これにはテーブルを使用しません。 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 */
6
Keith Donegan

これはちょっとしたハックですが、この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>
4
Justin Vincent

ラベルが長く、複数行に渡る場合、幅と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>
3
Mika

これに対する最善の解決策は、ラベルに一致する高さを入力に与えることでした。少なくともこれにより、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>
2
Angus

次のコードが動作するはずです:)

よろしく、

 
 <style type = "text/css"> 
 input [type = checkbox] {
 margin-bottom：4px; 
 vertical- align：middle; 
} 
 
 label {
 vertical-align：middle; 
} 
 </ style> 
 
 
 <input id = "checkBox1" type = "checkbox" /> <label for = "checkBox1">アセットを表示</ label> <br /> 
 <input id = "checkBox2" type = "checkbox" /> <label for = "checkBox2">検出器を表示</ label> <br />
2
Kin

これは私のために問題を解決した簡単な解決策です：

label 
{

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

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

padding-bottom:7px; 

}
1
Dunx

以下にチェックボックスを動的に挿入します。チェックボックスを揃えるためのスタイルが含まれており、Wordラップがまっすぐになるようにするために最も重要です。ここで最も重要なことはdisplay：table-cell; for alignment

視覚的な基本コード。

'チェックボックスを動的に挿入するコード

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

'チェックボックスを作成する

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()

'チェックボックスを接続します

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

'チェックボックスのスタイル

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%;}

およびHTML出力

<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>
1
eilering

しゅう

クラスを作成し、CSS値を割り当てました。

.radioA{
   vertical-align: middle;
}

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

1
Fight code with code

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

  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 CheckBoxの場合：

    <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>`
1
Ajay Shankar