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

Đố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?

Sử dụng thuộc tính căn chỉnh văn bản trong CSS của bạn:

input { 
    text-align: right; 
}

Điều này sẽ có hiệu lực trong tất cả các đầu vào của trang.
Mặt khác, nếu bạn muốn căn chỉnh văn bản của chỉ một đầu vào, hãy đặt kiểu nội tuyến:

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

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 ở trung tâm:

input {
text-align: center;
}

Nhưng, nó nên đượ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.

Ở đây bạn đi :

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

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

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 cho việc này. Ví dụ bootstrap sử dụng text-rightlớp. Sử dụng nó như thế này:

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

Như một lưu ý, điều này cũng hoạt động trên các loại đầu vào khác, như số như hình trên.

Nếu bạn không sử dụng một khung công tác đẹp như bootstrap thì bạn có thể tạo phiên bản riêng của lớp trình 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 trên trang web 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 đẹp để sắp xếp mọi thứ ngay mà không cần kiểu dáng nội tuyến hoặc ảnh hưởng đến mỗi hộp đầu vào.

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

Bây giờ 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 lưu nhiều nét chính nhưng nó làm cho mã của bạn sạch hơn.

Nếu bạn muốn làm cho nó được căn chỉnh sang bên phải sau khi văn bản mất tiêu điểm, bạn có thể thử sử dụng công cụ sửa đổi hướng. Điều này sẽ hiển thị phần bên phải của văn bản sau khi mất tập trung. ví dụ hữu ích nếu bạn muốn hiển thị tên tệp trong một đường dẫn lớn.

input.rightAligned {
  direction:ltr;
  overflow:hidden;
}
input.rightAligned:not(:focus) {
  direction:rtl;
  text-align: left;
  unicode-bidi: plaintext;
  text-overflow: ellipsis;
}

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

Trình chọn không hiện đang được hỗ trợ tốt: Hỗ trợ trình duyệt

@ Html.TextBoxFor (model => model.IssueDate, new {@group = "form-control", name = "inv_su_date", id = "inv_su_date", title = "Chọn Ngày phát hành hóa đơn", giữ chỗ = "dd / mm / yyyy ", style =" text-align: centre; "})

Không có CSS: Sử dụng thuộc tính STYLE của kiểu nhập văn bản

STYLE = "text-align: phải;"