높은 입력 요소의 효과를 달성하는 방법은 있지만 하단에서 높은 텍스트는?

높은 입력 요소 텍스트의 하단 정렬을 영리하게 구현합니다.

웹 개발에서는 종종 높은 높이 입력 상자를 설계해야하지만 동시에 입력 텍스트가 기본 수직 중심 대신 하단에 있기를 원합니다. 이 기사는 단순히 패딩을 사용하는 것 보다이 효과를 달성 할 수있는보다 유연하고 강력한 방법을 소개합니다.

먼저 입력 요소의 높이가 60 픽셀로 설정되고 텍스트가 기본적으로 중앙에있는 간단한 예를 살펴 보겠습니다.

<input type="text" style="height: 60px;">

텍스트를 뒤로 유지하기 위해 컨테이너를 만들고 절대 포지셔닝 및 하단 정렬을 사용하여 수행 할 수 있습니다. 이 방법은 텍스트 위치 문제를 해결할뿐만 아니라 입력 상자의 전체 스타일을보다 유연하게 제어 할 수 있습니다.

특정 단계는 다음과 같습니다.

1. 입력 요소의 기본 경계를 숨기십시오. CSS를 사용하여 입력의 경계를 투명 또는 없음으로 설정하십시오.
2. 입력 요소가 포함 된 컨테이너를 만듭니다. DIV 요소로 입력을 감고 DIV의 테두리 및 높이를 설정하십시오.
3. 입력 요소를 컨테이너의 바닥에 절대적으로 배치하십시오. 위치를 컨테이너 하단에 위치시켜 position: absolute 및 bottom: 0 .

다음은 구현 코드입니다.

<div class="input-container">
  <input type="text">
</div>

.input-container {
  높이 : 60px;
  국경 : 1px Solid #CCC; /* 사용자 정의 가능한 테두리 스타일*/
  위치 : 상대;
}

.input-container 입력 {
  높이 : 100%;
  국경 : 없음; /* 입력 숨기기 기본 테두리*/
  위치 : 절대;
  하단 : 0;
  너비 : 100%;
}

이 방법을 통해 텍스트를 높은 입력 요소의 하단에 성공적으로 배치하고 동시에 테두리 색상, 둥근 모서리 등과 같은 컨테이너 스타일을 쉽게 사용자 정의하여 전체 디자인 스타일에 더 잘 맞출 수 있습니다. 단순히 패딩을 사용하는 것과 비교할 때이 방법은 더 유연하고 유지 관리 및 확장이 쉽습니다.

위 내용은 높은 입력 요소의 효과를 달성하는 방법은 있지만 하단에서 높은 텍스트는?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!