วิธีจัดแนวข้อความภายในอินพุต?

สำหรับอินพุตเริ่มต้นทั้งหมดข้อความที่คุณกรอกจะเริ่มทางด้านซ้าย คุณจะทำให้มันเริ่มทางด้านขวาได้อย่างไร

ใช้คุณสมบัติการจัดแนวข้อความใน CSS ของคุณ:

input { 
    text-align: right; 
}

สิ่งนี้จะมีผลในอินพุตทั้งหมดของหน้า
มิฉะนั้นหากคุณต้องการจัดแนวข้อความเพียงอินพุตเดียวให้ตั้งค่าอินไลน์สไตล์:

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

ลองสิ่งนี้ใน CSS ของคุณ:

input {
text-align: right;
}

วิธีจัดแนวข้อความให้อยู่กึ่งกลาง:

input {
text-align: center;
}

แต่ควรจัดชิดซ้ายเนื่องจากเป็นค่าเริ่มต้น - และดูเหมือนจะเป็นมิตรกับผู้ใช้มากที่สุด

ไปเลย :

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

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

คำตอบที่ยอมรับได้ที่นี่ถูกต้อง แต่ฉันต้องการเพิ่มข้อมูลเล็กน้อย หากคุณใช้ไลบรารี / กรอบงานเช่น bootstrap อาจมีการสร้างคลาสสำหรับสิ่งนี้ ตัวอย่างเช่น bootstrap ใช้text-rightคลาส ใช้แบบนี้:

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

โปรดทราบว่าวิธีนี้ใช้กับอินพุตประเภทอื่นเช่นกันเช่นตัวเลขที่แสดงด้านบน

หากคุณไม่ได้ใช้เฟรมเวิร์กที่ดีเช่น bootstrap คุณสามารถสร้างคลาสตัวช่วยนี้ได้ เช่นเดียวกับคำตอบอื่น ๆ แต่เราจะไม่เพิ่มเข้าไปในคลาสอินพุตโดยตรงดังนั้นมันจะไม่นำไปใช้กับอินพุตเดี่ยวทุกรายการในไซต์หรือหน้าเว็บของคุณนี่อาจเป็นพฤติกรรมที่ไม่ต้องการ ดังนั้นสิ่งนี้จะสร้างคลาส css ที่ง่ายดีเพื่อจัดเรียงสิ่งต่าง ๆ ได้อย่างถูกต้องโดยไม่จำเป็นต้องใส่สไตล์อินไลน์หรือส่งผลกระทบต่อกล่องอินพุตทุกอัน

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

class="text-right"ตอนนี้คุณสามารถใช้ชั้นนี้ตรงเช่นเดียวกับปัจจัยข้างต้นด้วย ฉันรู้ว่ามันไม่ได้ช่วยประหยัดการกดปุ่มหลายครั้ง แต่มันทำให้รหัสของคุณสะอาดขึ้น

หากคุณต้องการให้มันอยู่ในแนวชิดขอบขวาหลังจากที่ข้อความหายไปคุณสามารถลองใช้ตัวปรับเปลี่ยนทิศทางได้ สิ่งนี้จะแสดงส่วนที่ถูกต้องของข้อความหลังจากปล่อยโฟกัส เช่นมีประโยชน์หากคุณต้องการแสดงชื่อไฟล์ในพา ธ ขนาดใหญ่

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>

ขณะนี้ไม่รองรับตัวเลือกที่เลือก: รองรับเบราว์เซอร์

@ Html.TextBoxFor (model => model.IssueDate, ใหม่ {@class = "form-control", name = "inv_issue_date", id = "inv_issue_date", title = "เลือกวันที่ออกใบแจ้งหนี้", placeholder = "dd / mm / yyyy ", style =" จัดเรียงข้อความ: center; "})

ไม่มี CSS: ใช้คุณสมบัติสไตล์ของการป้อนข้อความ

STYLE = "จัดเรียงข้อความ: ขวา;"