Helpex - Trao đổi & giúp đỡ Đăng nhập
17

Tôi có một trường đầu vào với chiều cao cố định. Văn bản được căn giữa theo chiều dọc, nhưng tôi muốn nó ở trên cùng bên trái của đầu vào.

CSS

.wideInput{
    text-align: left;
    padding:  0.4em;
    width: 400px;
    height: 200px;
}

HTML

<input class="longInput" value="<?php echo $row['foodPrice']; ?>" />

Đây là jsFiddle giải thích sự cố> http://jsfiddle.net/9cR5j/

17 hữu ích 0 bình luận 49k xem chia sẻ
4

nếu điều đó hơn là loại bỏ padding: 0.4em;và thiết lập

padding-left:0;
padding-top:0;
padding-bottom:0.4em;
padding-right: 0.4em;

Sau khi thực hiện thay đổi đổi tên lớp tại đây

<input class="wideInput" value="<?php echo $row['foodPrice']; ?>" />

thay vì longInputnó sẽ làwideInput


Cập nhật

Bản demo JsFiddle với TextArea

điều này sẽ chỉ hoạt động với textarea vì đầu vào chỉ cho phép nhập giá trị trong một dòng, tức là không có keyallowed hoặc nó không bao gồm văn bản dài, nó chỉ thêm dữ liệu trong một dòng

4 hữu ích 5 bình luận chia sẻ
8

Thay vì inputsao bạn không thử textarea?

<textarea class="longInput" cols="30" rows="10"></textarea>

Nó sẽ thêm văn bản từ góc trên bên trái.

8 hữu ích 1 bình luận chia sẻ
1

Phần đệm của bạn đang khiến văn bản bắt đầu 0,4em từ phía bên tay trái. Nếu bạn muốn văn bản thực sự được căn trái, hãy xóa phần đệm ở bên trái:

.wideInput{
    text-align: left;
    padding: 0.4em 0.4em 0.4em 0;
    width: 400px;
    height: 200px;
}
1 hữu ích 4 bình luận chia sẻ
1

Để căn trái và trên cùng, bạn sẽ phải đặt chiều cao nhỏ hơn và phần đệm dưới cùng:

text-align: left;
padding:  0.4em;
padding-bottom:190px;
width: 400px;
height: 10px;
1 hữu ích 0 bình luận chia sẻ
0

Hãy thử đặt thuộc tính line-heightCSS trên inputtrường giống với thuộc tính heightcủa trường đó.

height:200px; line-height:200px;
0 hữu ích 0 bình luận chia sẻ
0

Như Pranay Rana đã nói, phần đệm của bạn đang gây ra vấn đề và câu trả lời của anh ấy là đúng. Ngoài ra, bạn có thể sử dụng đề xuất phím tắt cho padding:

padding: 0 0.4rem 0.4rem 0;

Điều này giống như:

padding-left:0;
padding-top:0;
padding-bottom:0.4em;
padding-right: 0.4em;

Nó nhận các giá trị theo thứ tự chiều kim đồng hồ, vì vậy đầu tiên trên cùng, bên phải, dưới cùng và sau đó sang trái. Và nếu bạn muốn văn bản nằm trên nhiều dòng, hãy sử dụng textareathay vì thông thường input[type=text].

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ html css , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading