对于所有默认输入,您填写的文本从左侧开始。怎么让它从右边开始?
在CSS中使用text-align属性:
input {
text-align: right;
}
这将在页面的所有输入中生效。 否则,如果你只想对齐一个输入的文本,设置样式为inline:
<input type="text" style="text-align:right;"/>
给你:
输入[type=text] {text-align:right} < >形式 <input type="text" name="name" value=""> . > < /形式
在你的CSS中试试这个:
input {
text-align: right;
}
要使文本在中间对齐:
input {
text-align: center;
}
但是,它应该是左对齐的,因为这是默认的-并且看起来是最用户友好的。
这里公认的答案是正确的,但我想补充一点信息。如果你正在使用一个库/框架,如bootstrap,可能有内置的类。例如,bootstrap使用text-right类。像这样使用它:
<input type="text" class="text-right"/>
<input type="number" class="text-right"/>
值得注意的是,这也适用于其他输入类型,如上面所示的数字。
如果你没有使用bootstrap这样的框架,那么你可以创建自己版本的这个helper类。类似于其他答案,但我们不打算直接将其添加到输入类中,因此它不会应用于您网站或页面上的每个输入,这可能不是理想的行为。所以这将创建一个很好的简单的css类来对齐东西,而不需要内联样式或影响每个输入框。
.text-right{
text-align: right;
}
现在你可以使用class="text-right"和上面的输入完全一样的方法来使用这个类。我知道这并没有节省很多按键,但它使你的代码更干净。
如果你想让它在文本失去焦点后向右对齐,你可以尝试使用方向修饰器。这将显示文本在失去焦点后的正确部分。例如,如果你想在一个大的路径中显示文件名,这很有用。
输入。rightAligned { 方向:ltr; 溢出:隐藏; } input.rightAligned:没有(焦点){ 方向:rtl; text-align:左; unicode-bidi:明文; 文本溢出:省略; } < >形式 <input type="text" class=" rightalign "name ="name" value=""> . > < /形式
not选择器目前得到了很好的支持:浏览器支持
@Html。TextBoxFor(model =>模型。IssueDate, new {@class = "form-control", name = "inv_issue_date", id = "inv_issue_date", title = "Select Invoice开票日期",placeholder = "dd/mm/yyyy", style = "text-align:center;"})
以下方法可能对你有用:
<style>
input {
text-align: right !important;
}
textarea{
text-align:right !important;
}
label {
float: right !important;
}
</style>
引导5现在class="text-end":
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=“anonymous”> <input step=“any” id=“myInput” type=“number” class=“text-end”>
. 参考网址:https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 如何用Javascript构建查询字符串
- 如何在ASP中处理复选框。NET MVC窗体?
- 检测输入是否有文本在它使用CSS -在一个页面上,我正在访问和不控制?