입력 요소의 높이를 높이고 텍스트를 바닥에서 만드는 방법은 무엇입니까?

텍스트가 바닥에 우아하게 도킹 될 수 있도록 입력 요소의 높이를 영리하게 조정하십시오.

웹 디자인에서는 입력 요소의 높이를 조정하고 그 텍스트가 바닥에 있는지 확인해야합니다. 그러나 입력 요소의 기본 텍스트는 수직으로 중앙에 있습니다. 어떻게 해결할 수 있습니까? 이 기사는 패딩에 의존하지 않는 영리한 방법을 제공합니다.

문제 설명

높이가 60 픽셀 인 입력 요소가 있고 텍스트가 기본적으로 중앙에 있다고 가정합니다. 입력 요소의 높이를 변경하지 않고 텍스트를 바닥에 조정해야합니다.

초기 HTML 및 CSS 코드는 다음과 같습니다.

 


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>문서</title>
  <style>
    input {
      height: 60px;
    }
  </style>


  <input type="text">

해결책 : 컨테이너 방법

대상 효과를 달성하기 위해 컨테이너를 생성하고 입력 요소를 배치하고 절대 포지셔닝을 사용하여 입력 위치를 정확하게 제어 할 수 있습니다. 특정 단계는 다음과 같습니다.

1. 입력 기본 경계 숨기기 : 입력의 테두리를 투명하거나 경계없는 것으로 설정하십시오.
2. 커스텀 컨테이너 생성 : DIV 컨테이너를 만들고 높이와 테두리 스타일을 설정하십시오.
3. 절대 포지셔닝 입력 : 사용 position: absolute; 컨테이너의 바닥에 입력을 찾으려면.

수정 된 코드는 다음과 같습니다.

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
    .input-container {
      height: 60px;
      border: 1px solid #000; /* 可自定义边框样式 */
      position: relative;
    }
    .input-container input {
      height: 100%;
      border: none; /* 隐藏input默认边框 */
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  </style>


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

이 방법은 입력 요소의 텍스트를 60 픽셀의 높이를 유지하면서 입력 요소의 텍스트를 효과적으로 찾아 패딩을 사용하여 발생하는 잠재적 인 레이아웃 문제를 피하고 스타일과 위치를보다 유연하게 제어합니다.

위 내용은 입력 요소의 높이를 높이고 텍스트를 바닥에서 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!