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

Program / 글쓴이

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

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

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

스 니펫 확장