Bir giriş içindeki metinler nasıl hizalanır?

Tüm varsayılan girişler için doldurduğunuz metin soldan başlar. Sağdan nasıl başlatabilirsiniz?

CSS'nizdeki text-align özelliğini kullanın :

input { 
    text-align: right; 
}

Bu, sayfanın tüm girişlerinde etkili olacaktır.
Aksi takdirde, yalnızca bir girişin metnini hizalamak istiyorsanız, stili satır içi olarak ayarlayın:

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

Bunu CSS'nizde deneyin:

input {
text-align: right;
}

Metni ortaya hizalamak için:

input {
text-align: center;
}

Ancak, bu varsayılan olarak olduğu gibi sola hizalanmalıdır - ve en kullanıcı dostu gibi görünür.

İşte başlıyoruz :

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

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

Burada kabul edilen cevap doğrudur ama biraz bilgi eklemek istiyorum. Bootstrap gibi bir kütüphane / çerçeve kullanıyorsanız bunun için sınıflar oluşturulmuş olabilir. Örneğin, bootstrap text-rightsınıfı kullanır . Şöyle kullanın:

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

Not olarak bu, yukarıda gösterildiği gibi sayısal gibi diğer giriş türlerinde de çalışır.

Bootstrap gibi güzel bir çerçeve kullanmıyorsanız, bu yardımcı sınıfın kendi sürümünü oluşturabilirsiniz. Diğer yanıtlara benzer, ancak doğrudan giriş sınıfına eklemeyeceğiz, böylece sitenizdeki veya sayfanızdaki her bir giriş için geçerli olmayacaktır, bu istenen davranış olmayabilir. Böylece bu, satır içi stile ihtiyaç duymadan veya her bir giriş kutusunu etkilemeden işleri hizalamak için kolay bir css sınıfı oluşturacaktır.

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

Şimdi bu sınıfı yukarıdaki girişlerle tamamen aynı şekilde kullanabilirsiniz class="text-right". Birçok tuş vuruşunu kaydetmediğini biliyorum, ancak kodunuzu daha temiz hale getiriyor.

Metin odağı kaybettikten sonra sağa hizalamak istiyorsanız, yön değiştiriciyi kullanmayı deneyebilirsiniz. Bu, odağı kaybettikten sonra metnin sağ kısmını gösterecektir. örneğin, dosya adını büyük bir yolda göstermek istiyorsanız kullanışlıdır.

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>

Seçici şu anda iyi desteklenmiyor: Tarayıcı desteği

@ Html.TextBoxFor (model => model.IssueDate, yeni {@class = "form-kontrol", ad = "inv_issue_date", id = "inv_issue_date", title = "Fatura Düzenleme Tarihini Seç", yer tutucu = "gg / aa / yyyy ", style =" text-align: center; "})

CSS olmadan: Metin girişinin STYLE özelliğini kullanın

STYLE = "text-align: right;"