>웹 프론트엔드 >CSS 튜토리얼 >양식 입력 레이블을 오른쪽으로 정렬하는 방법은 무엇입니까?

양식 입력 레이블을 오른쪽으로 정렬하는 방법은 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-11-06 21:29:02644검색

How to Align Form Input Labels to the Right?

양식 입력 레이블 정렬

이 문서의 목표는 양식 레이블을 해당 레이블 옆 오른쪽에 정렬하는 솔루션을 제공하는 것입니다. inputs.

가능한 해결책 중 하나는 width 속성을 사용하여 레이블 요소의 고정 너비를 설정하고 디스플레이: inline-block을 사용하여 인라인 블록 표시를 활성화하는 것입니다. 또한 text-align: right를 사용하여 텍스트를 오른쪽으로 정렬하면 레이블이 정확하게 배치됩니다.

다음은 이 솔루션을 보여주는 코드 조각입니다.

<code class="css">label {
  display: inline-block;
  width: 140px;
  text-align: right;
}</code>
<code class="html"><div class="block">
  <label>Simple label</label>
  <input type="text" />
</div>
<div class="block">
  <label>Label with more text</label>
  <input type="text" />
</div>
<div class="block">
  <label>Short</label>
  <input type="text" />
</div></code>

이 방법 입력 항목 옆에 일관되게 레이블을 정렬하는 간단한 방법을 제공하여 사용자 경험과 양식 가독성을 향상시킵니다.

위 내용은 양식 입력 레이블을 오른쪽으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.