같은 줄에 표시 할 라디오 버튼 및 레이블

내 레이블과 라디오 단추가 같은 줄에 유지되지 않는 이유는 무엇입니까?

내 양식은 다음과 같습니다.

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

이 코드를 사용하고 잘 작동합니다.

input[type="checkbox"], 
input[type="radio"],
input.radio,
input.checkbox {
    vertical-align:text-top;
    width:13px;
    height:13px;
    padding:0;
    margin:0;
    position:relative;
    overflow:hidden;
    top:2px;
}

상위 값을 재조정 할 수 있습니다 (에 따라 다름 line-height). IE6 호환성을 원하지 않는 경우이 코드를 페이지에 넣으면됩니다. 그렇지 않으면 입력에 추가 클래스를 추가해야합니다 (jQuery 또는 다른 라이브러리를 사용할 수 있습니다.)).

** 라디오와 텍스트를 한 줄로 정렬하기 위해 사용 된 표

<div >
  <table>
    <tbody>
      <tr>
        <td><strong>Do you want to add new server ?</strong></td>
        <td><input type="radio" name="addServer" id="serverYes" value="1"></td>
        <td>Yes</td>
        <td><input type="radio" name="addServer" id="serverNo" value="1"></td>
        <td>No</td>

      </tr>
    </tbody>
  </table>
</div>

**

해당 코드를 사용하여 Google Chrome 4.0, IE8 또는 Firefox 3.5에서 문제를 재현 할 수 없습니다. 레이블과 라디오 버튼은 같은 줄에 있습니다.

둘 다 <p>태그 안에 넣거나 The Elite Gentleman이 제안한 것처럼 라디오 버튼을 인라인으로 설정하십시오.

동일한 주제에 대한 다른 게시물의 내 ​​답변은 다중 확인란에 대한 양식을 zend하여 레이블에서 입력을 제거하는 데 도움이 될 것입니다.

참고 : 전통적으로 레이블 태그는 메뉴에 사용됩니다. 예 :

<menu>
<label>Option 1</label>
<input type="radio" id="opt1">

<label>Option 2</label>
<input type="radio" id="opt2">

<label>Option 3</label>
<input type="radio" id="opt3">  
</menu>

모든 라디오 버튼을 같은 줄에 유지하는 비슷한 문제가 발생했습니다. 내가 할 수있는 모든 것을 시도한 후에 다음을 제외하고는 아무것도 효과가 없었습니다. 내 말은 단순히 테이블을 사용하면 라디오 버튼이 같은 줄에 나타날 수있는 문제가 해결되었습니다.

<table>
<tr>
    <td>
        <label>
            @Html.RadioButton("p_sortForPatch", "byName", new { @checked = "checked", @class = "radio" }) By Name
        </label>
    </td>
    <td>
        <label>
            @Html.RadioButton("p_sortForPatch", "byDate", new { @class = "radio" }) By Date
        </label>
    </td>
</tr>
</table>

창이 너무 좁을 때 레이블과 입력이 두 줄로 줄 바꿈되는 것이 문제인 경우 그 사이의 공백을 제거하십시오. 예 :

<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />

요소 사이에 공백이 필요하면 구분되지 않는 공백 ( & nbsp;) 또는 CSS를 사용하십시오.

fieldset {
  overflow: hidden
}

.class {
  float: left;
  clear: none;
}

label {
  float: left;
  clear: both;
  display:initial;
}

input[type=radio],input.radio {
  float: left;
  clear: both;     
}