Làm cách nào để căn chỉnh văn bản bên trong đầu vào?

Question

Đối với tất cả các đầu vào mặc định, văn bản bạn điền bắt đầu ở bên trái. Làm thế nào để bạn làm cho nó bắt đầu ở bên phải?

Answer 1

Sử dụng text-align tài sản trong CSS của bạn:

input { 
    text-align: right; 
} 

này sẽ có hiệu lực trong tất cả các yếu tố đầu của trang.
Ngược lại, nếu bạn muốn canh lề văn bản chỉ một đầu vào, thiết lập các inline style:

<input type="text" style="text-align:right;"/> 

Answer 2

Here you go:

input[type=text] { text-align:right }

<form> 
 
    <input type="text" name="name" value=""> 
 
</form>

Answer 3

Hãy thử điều này trong CSS của bạn:

input { 
text-align: right; 
} 

Để căn chỉnh văn bản ở giữa:

input { 
text-align: center; 
} 

Tuy nhiên, nó phải được căn trái, vì đó là mặc định - và có vẻ thân thiện với người dùng nhất.

Answer 4

Nếu không có CSS: Sử dụng thuộc tính STYLE đầu vào văn bản

STYLE = "text-align: right;"

Answer 5

Câu trả lời được chấp nhận ở đây là chính xác nhưng tôi muốn thêm một chút thông tin. Nếu bạn đang sử dụng một thư viện/khung như bootstrap có thể được xây dựng trong các lớp học cho việc này. Ví dụ, bootstrap sử dụng lớp text-right. Sử dụng nó như thế này:

<input type="text" class="text-right"/> 
<input type="number" class="text-right"/> 

Là một lưu ý làm việc này trên các loại đầu vào khác cũng như số như trình bày ở trên.

Nếu bạn không sử dụng khung làm đẹp như bootstrap thì bạn có thể tạo phiên bản riêng của lớp trợ giúp này. Tương tự như các câu trả lời khác nhưng chúng tôi sẽ không thêm nó trực tiếp vào lớp đầu vào để nó không áp dụng cho mọi đầu vào đơn lẻ trên trang hoặc trang của bạn, đây có thể không phải là hành vi mong muốn. Vì vậy, điều này sẽ tạo ra một lớp css dễ dàng để sắp xếp mọi thứ ngay mà không cần tạo kiểu nội tuyến hoặc ảnh hưởng đến mỗi hộp nhập liệu đơn lẻ.

.text-right{ 
    text-align: right; 
} 

Giờ đây bạn có thể sử dụng lớp này chính xác giống như các đầu vào ở trên với class="text-right". Tôi biết nó không phải là tiết kiệm mà nhiều nét chính nhưng nó làm cho mã của bạn sạch hơn.