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

Barbara Streisand
풀어 주다: 2024-11-04 05:57:29
원래의
753명이 탐색했습니다.

How to Align Radio Buttons and Labels on the Same Line in 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿