Soru HTML / CSS'de radyo / onay kutusu hizalaması


Radyo düğmelerini / onay kutularını metinle hizalamanın en temiz yolu nedir? Şimdiye kadar kullandığım tek güvenilir çözüm masa tabanlı:

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

Bu bazıları tarafından çekilebilir. Sadece biraz zaman harcadım (tekrar), tabutsuz bir çözümü araştırdım ama başarısız oldu. Çeşitli yüzer kombinasyonları, mutlak / göreli konumlandırma ve benzer yaklaşımları denedim. Sadece radyo tuşlarının / onay kutularının tahmini yüksekliğinde sessizce güvendikleri değil, aynı zamanda farklı tarayıcılarda da farklı davrandılar. İdeal olarak, boyutları veya özel tarayıcı sorgulamaları hakkında bir şey düşünmeyen bir çözüm bulmak istiyorum. Tabloları kullanıyorum, ama başka bir çözümün nerede olduğunu merak ediyorum.


76
2017-12-28 17:40


Menşei


Sorunuzu "HTML'de" demek istediğinizi açıkça belirtmek için düzenlemeniz gerekir. Java için sorunuzu cevaplayacaktım ... - Richard T
Umarım @Richard T JavaScript'i kastetti - QueueHammer
... ya da Swing .... - devios1
Bazı önerileri göstermek için bir JSFIddle kurdum: jsfiddle.net/casebash/XNJxT/906 - Casebash
"Ne demek istediğini düzgün hizala? Doğru şekilde hizalanmış sayılır? - Raedwald


Cevaplar:


Sonunda problemi çözdüğümü düşünüyorum. Genel olarak önerilen bir çözüm dikey hizalama kullanmaktır: orta:

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

Ancak problem, teorik olarak çalışmasına rağmen, bu durumun hala yanlış hizalamalar yaratmasıdır. CSS2 belirtimi şunları söylüyor:

dikey hizalama: orta: Kutunun dikey orta noktasını ana kutunun taban çizgisi artı ebeveynin yarısı x yüksekliğiyle hizalayın.

Yani mükemmel merkezde olmalı (x yüksekliği x karakterinin yüksekliğidir). Ancak, sorun, tarayıcılar genellikle radyo düğmelerine ve onay kutularına rasgele eşit olmayan kenar boşlukları eklemek gerçeğinden kaynaklanıyor gibi görünüyor. Örneğin Firefox'ta Firebug kullanarak, Firefox'taki varsayılan onay kutusu marjını kontrol edebilirsiniz. 3px 3px 0px 5px. Nereden geldiğinden emin değilim, ancak diğer tarayıcıların da benzer marjları var gibi görünüyor. Böylece mükemmel bir hizalama elde etmek için, bu kenar boşluklarından kurtulmak gerekir:

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

Tablo tabanlı çözümde, kenar boşluklarının bir şekilde yenildiğini ve her şeyin güzel bir şekilde hizalandığını belirtmek yine de ilginç.


116
2018-05-20 21:55



Gerçekten güzel cevap - iyi araştırılmış ve işe yarıyor. CSS'ye ne kadar çok baktığımda, daha yerelleştirilmiş marj ve dolgu ayarları önemli gözüküyor. Teşekkürler! - penderi
Bunun için güzel bir css, bu yüzden her butona ve kutuya stil uygulamak zorunda değilsiniz - input [type = "radio"], input [type = "checkbox"] {vertical-align: middle; kenar boşluğu: 0px; } - perilandmishap
FYI, 0'dan sonra px yedekli. CSS değeri 0 olduğunda, birim önemli değil margin:0 yeterli olur. - jedmao
Btw, bu işe yarayamıyorum :( jsfiddle.net/gNVsC - jedmao
Kontrol etmeyi unutma vertical-align Aynı hattaki diğer unsurların (ör. <label>) Bu çözümü kullanırken. - Diogo Kollross


Firefox ve Opera'da aşağıdaki işler (üzgünüm, şu anda diğer tarayıcılara erişimim yok):

<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
2017-10-28 15:02



Cevabınızın neden kabul edilmediğini anlamıyorum, tüm önemli tarayıcılar için en basit çalışanı (18.Apr.2010 itibariyle) - Chris
Lütfen DİKKAT-ALIGN'ın etkilerini görmek için belgenizin DOCTYPE'inin STRICT olması gerektiğini unutmayın.
Bunun cevabın kabul edilmemesinin sebebi, seçilen cevapların da belirttiği gibi, bazı tarayıcıların bu yaklaşımı çalışmayı durduran asimetrik kenar boşluğu değerleri ekledikleridir. - DaveyDaveDave


Bunu yapmanın en iyi ve en kolay yolunu buldum, çünkü bu bir etiket, div veya herhangi bir şey eklemeniz gerekmiyor.

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


13
2017-12-28 18:07



Bu kenar üstü: -1px; Bu benim oyımı alan ekstra sos. Bir düğme içinde kullandığım bir açıklığın içinde bir telsiz var. Radyo stili için sadece dikey hizalama koymak, telsizin sadece açıklığın altını geçmesini sağlar. yayılma stilinde dikey hizalama, düğmeyi üst kısımda bırakır. Sadece kenar boşluğunun etkisi yok gibi görünüyor. Ama onları bir araya getirin ve işte - gordon
-1px ne yapar? - Casebash
-1. Bu kötü bir fikir, radyo elemanının diğer çevre elemanlarıyla uyumsuzluğuna neden olan kaymasına neden oluyorsunuz. Haydi, yanlarındaki diğer elemanlarla birbiri ardına birkaç radyo girişi ile deneyin. - codenamezero


Bunun için masaları kullanmazdım. CSS bunu kolayca yapabilir.

Böyle bir şey yapardım:

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

Not: Clearfix sınıfını aşağıdakilerden kullandım: 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
2017-07-08 22:34



Yanıt için teşekkür ederim, ama korkarım hizalama problemini çözmüyor. Daha açık olmalıydım. Amacım onay kutularını / radyo düğmelerini etiketleriyle dikey olarak hizalamaktır. - Jan Zich
Bunu benim kodumla yapabilirsin. Etiket üzerindeki kenar boşluğu ile oynayın ve isterseniz bunu giriş öğesine ekleyebilirsiniz. Yani etiket {margin: 10px 0px 0px 10px; yüzer: sol; } etiketi 10 piksel aşağı itecektir. - Keith Donegan
Bunu yapabilirsiniz, ancak asıl sorudaki noktalardan biri, radyo düğmeleri / onay kutularının boyutları hakkında bir şey varsaymak değildi. Muhtemelen benim sorum çok iyimserdi. - Jan Zich


Bu bir kesmek biraz ama bu CSS tüm tarayıcılarda tabloları kullanarak aynı derecede güzel çalışmasını sağlıyor gibi görünüyor (krom dışında)

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

Çalışması için radyolarınızla birlikte etiketler kullandığınızdan emin olun. diğer bir deyişle

<option> <label>My Radio</label>

4
2018-01-09 13:07



Medya olayı, mobil cihazlarda bana çok yardımcı oldu. Teşekkürler! - Sven van Zoelen


Etiketiniz uzunsa ve genişliği ve göstergeyi ayarlayarak birden çok satıra giderse: satır içi blok yardımcı olur.

.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
2017-10-21 23:38





Bunun için en iyi düzeltmeyi girdiye etiketle eşleşen bir yükseklik vermekti. En azından bu, Firefox ve IE'deki tutarsızlıklarla ilgili problemimi çözdü.

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
2018-04-19 19:20



Eşleştirme yüksekliği telsizlerimi onardı. Checkbox'lar değil, site.css'imiz oldukça karmaşık olduğundan endişelenmeyin. - SushiGuy


Aşağıdaki kod çalışmalıdır :)

Saygılarımızla,



<stil türü = "metin / css">
girdi [type = checkbox] {
    kenar boşluğu: 4px;
    dikey hizalama: orta;
}

etiket {
    dikey hizalama: orta;
}
</ Style>


<input id = "checkBox1" type = "checkbox" /> <label for = "checkBox1"> Öğeleri göster </ label> <br />
<input id = "checkBox2" type = "checkbox" /> <label for = "checkBox2"> Dedektörleri göster </ etiket> <br />

2
2018-06-21 08:27





Bu benim için sorunu çözen basit bir çözüm:

label 
{

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

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

padding-bottom:7px; 

}

1
2017-11-29 21:25





Bunu uygulamak için çeşitli yollar vardır:

  1. ASP.NET Standart CheckBox için:

    .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 için:

    <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
    <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>
    
  3. RadioButtonList için:

    <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
       <asp:ListItem>Yes</asp:ListItem>
       <asp:ListItem>No</asp:ListItem>
    </asp:RadioButtonList>
    
  4. Zorunlu Alan Doğrulayıcıları İçin:

    <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
2018-01-06 07:21





Aşağıda dinamik olarak bir onay kutusu ekleyeceğim. Stil, onay kutusunu hizalamak için dahil edilir ve en önemlisi, kelime sarma düz olduğundan emin olmak için. Burada en önemli şey ekran: tablo hücresi; hizalama için

Görsel temel kod.

'bir onay kutusunu dinamik olarak eklemek için kod

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

'onay kutusunu oluştur

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

'onay kutusunu bağlayın

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

'onay kutusu için stil

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

ve HTML çıkışı

<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
2017-08-22 10:42