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

https://stackoverflow.com/questions/396439

29-08-2019
|

質問

何が最もきれいに揃えを適切にラジオボタン/チェックボックスとテキストを使うことができます。の信頼性の高いソリューションするっていうのがテーブル:

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

こfrown動の基本である。いただきました、ある(再度)調査tableless解決が失敗しました。たって様々な組み合わせの山車、絶対/相対的な位置決めと同様のアプローチ。なるほ信頼を黙って見積高のラジオボタン/チェックボックスのものとは異なった動きを別のブラウザを推奨いたします。理想いを解くことを想定したものではありませんのことならサイズまたはブラウザに特別な操作.今用テーブル、そして、もうひとつの場もあります。

解決

私は私が最終的に問題を解決したと思います。 1つの一般的推奨されるソリューションは、垂直整列を使用することである：中央の

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

問題は、しかし、これはまだそれが理論的に動作するはずにもかかわらず、目に見えるミスアライメントを生成することです。

：CSS2の仕様では、と言っています

の垂直整列：中央：の親ボックスプラス親の半分のx高さの基準とボックスの垂直方向中間点の位置を合わせ

だから、（X-高さは文字xの高さである）完璧中央にする必要があります。しかし、問題は、一般的に、ラジオボタンやチェックボックスにいくつかのランダムな凹凸のマージンを追加ファクトブラウザによって引き起こされているように見えます。一つは、Firefoxのデフォルトのチェックボックスのマージンが3px 3px 0px 5pxであること、Firebugのを使用してFirefoxで、たとえば、確認することができます。私はそれがどこから来るかわからないんだけど、他のブラウザにも同様のマージンを持っているようです。だから、完全な位置合わせを得るために、人はこれらのマージンを取り除く必要があります：

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

テーブルベースのソリューションにマージンが何とか食べていると、すべてがうまく整合していることに注意することは、まだ面白いです。

他のヒント

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

私はあなたが全くラベル、divを追加したりする必要はありませんので、これ一つで行うための最善かつ最も簡単な方法を見つけます。

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

私はすべてこのためにテーブルを使用することはありません。 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; }

注： http://www.positioniseverything.net/easyclearing：私はからclearfixクラスを使用していました。 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 */

これはハックのビットですが、この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>

あなたのラベルが長く、幅や表示の設定複数の行に進んだ場合：インラインブロックがお手伝いします。

。

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

私は、このための最良の修正プログラムは、入力にラベルと一致する高さを与えることがわかりました。少なくとも、これは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>

<のp>次のコードは動作するはずです：）

よろしく、

<時間>

<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">Show assets</label><br />
<input id="checkBox2" type="checkbox" /><label for="checkBox2">Show detectors</label><br />

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

label 
{

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

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

padding-bottom:7px; 

}

様々な方法がありそして、それを実践するには:

のための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>

たDevExpressチェックボックス:

<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>

のためのRadioButtonList:

<asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
   <asp:ListItem>Yes</asp:ListItem>
   <asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>

のために必要な分野Validator:

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

下記を挿入しますチェックボックます。スタイルが含まれのチェックボックスは、最も重要なくアップがまっすぐです。最も重要なのはここに表示:テーブル-細胞;光の

は、visual basicのコードです。

'このコードを動的に挿入しチェックボックス

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

'connectのチェックボックスをチェック

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>

@sfjedi

私は、クラスを作成し、それにCSS値を割り当てた。

.radioA{
   vertical-align: middle;
}

これは、働いていると、あなたは下のリンクでそれを確認することができます。 http://jsfiddle.net/gNVsC/するそれが有用であったホープます。

input[type="radio"], input[type="checkbox"] {
    vertical-align: middle;
    margin-top: -1;
}

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow