HTML에서 라디오 버튼과 라벨을 같은 줄에 정렬하는 방법은 무엇입니까?

동일한 줄에 라디오 버튼 및 라벨 배치

HTML 양식에서 라디오 버튼 및 관련 라벨을 한 줄에 정렬하는 것은 다음과 같습니다. 도전적이다. 이를 달성하기 위해 여러 CSS 기술을 사용할 수 있습니다.

제안된 HTML 구조는 레이블과 입력 요소의 위치를 ​​지정합니다.

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

가로로 정렬하려면 다음 CSS 규칙을 추가하세요.

<code class="css">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;
}</code>

라벨과 라디오 버튼이 나란히 배치됩니다. 여러 라디오 버튼이 같은 줄에 정렬되도록 하려면 다음 마크업을 사용하세요.

<code class="html"><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></code>

적절한 CSS 규칙을 사용하면 라디오 버튼과 레이블이 같은 줄에 정렬됩니다.

위 내용은 HTML에서 라디오 버튼과 라벨을 같은 줄에 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!