텍스트를 바닥에 유지하면서 입력의 높이를 높이는 방법은 무엇입니까?

높은 입력 상자의 하단에 맞게 텍스트를 가져 오는 팁

웹 개발에서는 높이가 큰 입력 상자를 만들고 기본 수직 중심 대신 텍스트를 아래에 두어야합니다. 이 기사는이 효과를 달성하는 몇 가지 방법을 소개합니다.

문제 : 텍스트는 수직으로 중심입니다

높이가 60px 인 입력 상자로, 텍스트는 기본적으로 수직 중앙에 표시됩니다. 바닥에 조정해야합니다.

해결책 : CSS를 활용하십시오

패딩이 없으면 영리한 CSS 레이아웃으로 수행 할 수 있습니다. 이 방법은 입력의 기본 경계를 숨기고 입력을 컨테이너로 컨테이너로 감고 컨테이너의 바닥에 배치하는 것입니다.

단계:

1. 입력 숨기기 기본 경계 : border: none; 입력의 기본 테두리를 제거하십시오.

2. 테두리가있는 컨테이너를 만듭니다 : div 컨테이너를 만들고 높이와 테두리 스타일을 설정하십시오.

3. 컨테이너 하단에 입력 위치 : 사용 position: absolute; 그리고 bottom: 0; 컨테이너의 바닥에 입력을 절대적으로 찾으십시오.

Code example:

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서</title>
<style>
.container {
  height: 60px;
  border: 1px solid #ccc;
  position: relative; /* 关键：使绝对定位的子元素相对于此容器定位 */
}
input {
  height: 100%;
  border: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
}
</style>


  <div class="container">
    <input type="text" placeholder="请输入文本">
  </div>

위의 방법을 사용하면 입력 높이가 증가하더라도 텍스트는 항상 바닥에 남아 있습니다. box-sizing: border-box; 입력의 높이 계산에는 테두리 및 내부 마진이 포함되어있어 높이 계산의 편차를 피합니다.

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