동일한 줄에 라디오 버튼 및 라벨 배치
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!