내 레이블과 라디오 단추가 같은 줄에 유지되지 않는 이유는 무엇입니까?
내 양식은 다음과 같습니다.
<form name="submit" id="submit" action="#" method="post">
<?php echo form_hidden('what', 'item-'.$identifier);?>
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
<label for="two">Second Item</label>
<input type="radio" id="two" name="first_item" value="2" />
<input class="submit_form" name="submit" type="submit" value="Choose" tabindex="4" />
</form>
답변
이 질문에서 내가 배치 한 HTML 구조를 사용하는 경우 레이블과 입력을 왼쪽으로 플로팅하고 정렬 될 때까지 패딩 / 여백을 조정할 수 있습니다.
그리고 예, 라디오 버튼에 이전 IE의 클래스 이름을 지정하고 싶을 것입니다. 그리고 위에서 링크 한 마크 업에 따라 모두 같은 줄에 있도록하려면 다음과 같습니다.
fieldset {
overflow: hidden
}
.some-class {
float: left;
clear: none;
}
label {
float: left;
clear: none;
display: block;
padding: 0px 1em 0px 8px;
}
input[type=radio],
input.radio {
float: left;
clear: none;
margin: 2px 0 0 2px;
}<fieldset>
<div class="some-class">
<input type="radio" class="radio" name="x" value="y" id="y" />
<label for="y">Thing 1</label>
<input type="radio" class="radio" name="x" value="z" id="z" />
<label for="z">Thing 2</label>
</div>
</fieldset>답변
내가 항상 한 것은 라벨 안에 라디오 버튼을 감싸는 것입니다.
<label for="one">
<input type="radio" id="one" name="first_item" value="1" />
First Item
</label>
그런 것이 항상 나를 위해 일했습니다.
답변
css 어딘가에 입력 태그에 너비를 지정할 수 있습니다 .
추가 class="radio"라디오 상자에과를 input.radio {width: auto;}당신의 CSS에.
답변
둘 다 display:inline.
답변
흠. 기본적으로 <label>is display: inline;및 <input>is (대략, 적어도) display: inline-block;이므로 둘 다 같은 줄에 있어야합니다. http://jsfiddle.net/BJU4f/ 참조
아마도 스타일이 설정되어 label나 input에게 display: block?
답변
문제는 창이 너무 좁을 때 별도의 줄로 줄 바꿈된다는 것입니다. 다른 사람들이 지적했듯이 기본적으로 레이블과 입력은 “display : inline;”이어야합니다. 따라서 이것을 변경하는 다른 스타일 규칙이없는 경우 공간이 있으면 같은 줄에 렌더링해야합니다.
마크 업을 변경하지 않으면 CSS 만 사용하여이 문제를 해결할 수 없습니다.
이를 수정하는 가장 간단한 방법은 라디오 버튼과 레이블을 a p또는 a 와 같은 블록 요소에 div래핑 한 다음을 사용하여 래핑하지 않도록하는 것 white-space:nowrap입니다. 예를 들면 :
<div style="white-space:nowrap;">
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
</div>
답변
나는 항상 사용 float:left하지 않고 대신 사용합니다.display: inline
.wrapper-class input[type="radio"] {
width: 15px;
}
.wrapper-class label {
display: inline;
margin-left: 5px;
}<div class="wrapper-class">
<input type="radio" id="radio1">
<label for="radio1">Test Radio</label>
</div>