HTML / CSS의 라디오 / 체크 박스 정렬


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>

이것은 일부 사람들에게 눈살을 찌푸 릴 수 있습니다. 테이블없는 솔루션을 조사하는 데 시간을 (다시) 보냈지 만 실패했습니다. 수레, 절대 / 상대 위치 및 유사한 접근 방식의 다양한 조합을 시도했습니다. 라디오 버튼 / 체크 박스의 예상 높이에 대부분 조용히 의존 할뿐만 아니라 브라우저마다 다르게 작동합니다. 이상적으로는 크기 또는 특수한 브라우저 특성에 대해 전혀 가정하지 않는 솔루션을 찾고 싶습니다. 나는 테이블을 사용하는 것은 좋지만 다른 해결책이 어디에 있는지 궁금합니다.


"HTML에서"를 의미 함을 명확히하기 위해 질문을 편집해야합니다. Java에 대한 귀하의 질문에 답하려고했습니다.
Richard T

3
나는 @ 리차드 T는 자바 스크립트를 의미 희망
QueueHammer

1
몇 가지 제안 사항을 설명하기 위해 JSFIddle을 설정했습니다. jsfiddle.net/casebash/XNJxT/906
Casebash

"정렬이 제대로 당신은 무엇을 의미 O를 카운트가 제대로 정렬로 무엇?
Raedwald

백분율로 정렬 할 수 있습니다. 나 자신을 위해 사용합니다. vertical-align : -15 %; 입력 태그에
PhilMaGeo

답변:


121

나는 마침내 문제를 해결했다고 생각합니다. 일반적으로 권장되는 솔루션 중 하나는 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

테이블 기반 솔루션에서 여백이 어떻게 든 먹고 모든 것이 잘 정렬된다는 점은 여전히 ​​흥미 롭습니다.


4
정말 좋은 대답입니다. 잘 조사되었으며 작동합니다. CSS를 더 많이 볼수록 더 현지화 된 여백과 패딩 설정이 핵심 인 것 같습니다. 감사!
penderi


5
이에 대한 멋진 CSS이므로 모든 버튼과 상자의 스타일을 지정할 필요가 없습니다.-input [type = "radio"], input [type = "checkbox"] {vertical-align : middle; 여백 : 0px; }
perilandmishap 2011 년

4
참고로 0 이후의 px는 중복됩니다. CSS 값이 0이면 단위는 중요하지 않으므로 margin:0충분합니다.
jedmao

2
이 솔루션을 사용할 때는 vertical-align같은 줄에있는 다른 요소 (예 :)를 확인해야합니다 <label>.
Diogo Kollross

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

귀하의 답변이 수락되지 않은 이유를 모르겠습니다. 모든 주요 브라우저에서 가장 간단하게 작동하는 것입니다 (
Chris

7
VERTICAL-ALIGN의 효과를 확인하려면 문서의 DOCTYPE이 엄격해야합니다.

4
이것이 대답으로 받아 들여지지 않은 이유는 선택된 대답이 말했듯이 일부 브라우저가 비대칭 여백 값을 추가하여이 접근 방식이 작동하지 않기 때문이라고 생각합니다.
DaveyDaveDave

13

레이블, div 등을 추가 할 필요가 없기 때문에 가장 쉽고 가장 쉬운 방법은이 방법입니다.

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


그것은이다 마진 탑 : -1px; 그것은 내 투표를 얻는 여분의 소스입니다. 버튼으로 사용하는 범위 내에 라디오가 있습니다. 라디오 스타일에 대해 수직 정렬 만 놓으면 라디오가 스팬의 하단을 가로지 릅니다. 스팬 스타일에 수직 정렬을 넣으면 버튼이 맨 위에 남습니다. margin-top 만 효과가없는 것 같습니다. 그러나 그것들을 합치고 짜잔
gordon

-1. 이것은 나쁜 생각입니다. 라디오 요소가 위로 이동하여 다른 주변 요소와 정렬되지 않습니다. 측면의 다른 요소와 함께 여러 라디오 입력으로 차례로 시도하십시오.
codenamezero

6

나는 이것을 위해 테이블을 전혀 사용하지 않을 것입니다. 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.html 에서 clearfix 클래스를 사용했습니다 .

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

답변 해주셔서 감사 합니다만, 얼라인먼트 문제가 해결되지 않는 것 같습니다. 나는 더 명확해야했다. 내 목표는 확인란 / 라디오 버튼을 레이블과 수직으로 정렬하는 것입니다.
Jan Zich

내 코드로 이것을 할 수 있습니다. 레이블의 여백을 가지고 놀며 원하는 경우 입력 요소에 추가 할 수도 있습니다. 그래서 라벨 {margin : 10px 0px 0px 10px; 왼쪽으로 뜨다; }은 라벨을 10 픽셀 아래로 내립니다.
Keith Donegan

3
그렇게 할 수 있지만 원래 질문의 요점 중 하나는 라디오 버튼 / 확인란의 크기에 대해 아무것도 가정하지 않는 것이 었습니다. 내 질문이 너무 낙관적이었을 것입니다.
Jan Zich

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>

미디어는 모바일 장치에서 많은 도움이되었습니다. 고마워!
Sven van Zoelen

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>

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>

높이가 일치하여 라디오가 고정되었습니다. 체크 박스는 아니지만 site.css는 상당히 복잡하기 때문에 걱정하지 않습니다.
SushiGuy 2013 년

2

다음 코드가 작동합니다. :)

문안 인사,


<style type = "text / css">
input [type = checkbox] {
    여백-하단 : 4px;
    수직 정렬 : 중간;
}

label {
    수직 정렬 : 중간;
}
</ 스타일>


<input id = "checkBox1"type = "checkbox"/> <label for = "checkBox1"> 저작물 표시 </ label> <br />
<input id = "checkBox2"type = "checkbox"/> <label for = "checkBox2"> 감지기 표시 </ label> <br />

1

이것은 나를 위해 문제를 해결 한 간단한 솔루션입니다.

label 
{

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

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

padding-bottom:7px; 

}

1

이를 구현하는 방법에는 여러 가지가 있습니다.

  1. ASP.NET Standard CheckBox의 경우 :

    .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

아래에서 동적으로 확인란을 삽입합니다. 체크 박스를 정렬하기위한 스타일이 포함되어 있으며 가장 중요한 것은 단어 줄 바꿈이 직선인지 확인하는 것입니다. 여기서 가장 중요한 것은 디스플레이입니다 : 테이블 셀; 정렬을 위해

시각적 기본 코드입니다.

'확인란을 동적으로 삽입하는 코드

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>



당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.