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

Program Tip

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

programtip 2020. 10. 11. 11:15

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>

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

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

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

다음은 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.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 */

이것은 약간의 해킹이지만이 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>

레이블이 길고 여러 행으로 진행되는 경우 너비 및 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>

이에 대한 최선의 해결책은 입력에 레이블과 일치하는 높이를 제공하는 것입니다. 적어도 이것은 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>

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

문안 인사,


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

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

label 
{

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

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

padding-bottom:7px; 

}

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

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>

DevExpress CheckBox의 경우 :

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

필수 필드 유효성 검사기 :

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

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

시각적 기본 코드입니다.

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

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>

뿡뿡

클래스를 만들고 CSS 값을 할당했습니다.

.radioA{
   vertical-align: middle;
}

작동 중이며 아래 링크에서 확인할 수 있습니다. http://jsfiddle.net/gNVsC/ 유용하기를 바랍니다.

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

참고 URL : https://stackoverflow.com/questions/396439/radio-checkbox-alignment-in-html-css

'Program Tip' 카테고리의 다른 글

프로그래밍 방식으로 버튼 위젯에 포커스를 설정하는 방법은 무엇입니까? (0)	2020.10.11
Javascript-다른 배열 안에 배열 삽입 (0)	2020.10.11
Internet Explorer 8의 jQuery 문제 (0)	2020.10.11
다음을 사용하여 컴파일 오류 : 스위치, "이전에 예상되는 표현식" (0)	2020.10.11
jQuery scrollTop은 Chrome에서 작동하지 않지만 Firefox에서는 작동합니다. (0)	2020.10.11

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

programtip

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

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

'Program Tip' 카테고리의 다른 글

'Program Tip'의 다른글

티스토리툴바

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

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

'Program Tip' 카테고리의 다른 글

'Program Tip'의 다른글

관련글

티스토리툴바