對于所有默認輸入,您填充的文本從左側(cè)開始。你如何讓它從右邊開始?
在CSS中使用text-align屬性:
input {
text-align: right;
}
這將在頁面的所有輸入中生效。 否則,如果您只想對齊一個輸入的文本,請設(shè)置樣式為inline:
<input type="text" style="text-align:right;"/>
在你的CSS中試試這個:
input {
text-align: right;
}
要將文本居中對齊:
input {
text-align: center;
}
但是,它應(yīng)該是左對齊的,因為這是默認設(shè)置——并且看起來對用戶最友好。
給你:
input[type=text] { text-align:right }
<form>
<input type="text" name="name" value="">
</form>
這里公認的答案是正確的,但我想補充一點信息。如果你使用一個像bootstrap這樣的庫/框架,可能會有內(nèi)置的類。例如,bootstrap使用text-right類。像這樣使用它:
<input type="text" class="text-right"/>
<input type="number" class="text-right"/>
注意,這也適用于其他輸入類型,比如上面顯示的數(shù)字。
如果你沒有使用像bootstrap這樣的好框架,那么你可以自己制作這個助手類的版本。類似于其他答案,但我們不打算將它直接添加到輸入類,所以它不會應(yīng)用于您的網(wǎng)站或頁面上的每一個輸入,這可能不是期望的行為。因此,這將創(chuàng)建一個很好的簡單的css類來調(diào)整事情,而不需要內(nèi)聯(lián)樣式或影響每一個輸入框。
.text-right{
text-align: right;
}
現(xiàn)在,您可以使用這個類,就像上面的class="text-right "輸入一樣。我知道這并沒有節(jié)省太多的擊鍵次數(shù),但是它讓你的代碼更加整潔。
如果你想讓它在文本失去焦點后向右對齊,你可以嘗試使用方向修飾符。這將在失去焦點后顯示文本的右邊部分。例如,如果您想以大路徑顯示文件名,這很有用。
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>
以下方法可能對您有用:
<style>
input {
text-align: right !important;
}
textarea{
text-align:right !important;
}
label {
float: right !important;
}
</style>
現(xiàn)在,Bootstrap 5的版本為class = & quot文本-end & quot;:
<link rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<input step="any" id="myInput" type="number" class="text-end">
@Html。TextBoxFor(模型= >模型。IssueDate,new { @class = "form-control ",name = "inv_issue_date ",id = "inv_issue_date ",title = "選擇發(fā)票開具日期",placeholder = "dd/mm/yyyy ",style = " text-align:center;"})
input[type=text]{
text-align: right;
}
不帶CSS: 使用文本輸入的樣式屬性
STYLE = " text-align:right;"