[英]How can I add space to a right-aligned <input> element between cusror/caret and text?
I have an input and when a user enters a value like 5,1 the text and the cursor/caret are uncomfortable close depending on the font :我有一个输入,当用户输入一个像 5,1 这样的值时,文本和光标/插入符号的关闭取决于字体:
Example code to play around with below.在下面玩的示例代码。 Experiment with your own fonts to find a similar one as I can't share the one in the image.
尝试使用您自己的 fonts 以找到类似的,因为我无法分享图像中的那个。
<input type="text" style="text-align: right; font-family: 'SuperSecret';" value="5.1" />
How can I separate the two a bit?我怎样才能将两者分开一点? I don't want to alter the data in any way, so JS solutions/hacks like adding a whitespace character to the end of the sentence are not preferred.
我不想以任何方式更改数据,因此不首选 JS 解决方案/黑客,例如在句尾添加空格字符。
Edit: As discussed in the comments of the accepted answer, it's actually not possible to do this with CSS.编辑:正如已接受答案的评论中所讨论的,实际上不可能用 CSS 来做到这一点。
Use letter-spacing
使用
letter-spacing
input { letter-spacing: 10px; }
<input type="text" style="text-align: right; font-family: 'SuperSecret';" value="5.1" />
As described in the comments by @zgood, using padding-right
will add some space between the last most character and the right side of the input field;正如@zgood 的评论中所述,使用
padding-right
将在最后一个字符和输入字段的右侧之间添加一些空格;
input { padding-right: 20px; }
<input type="text" style="text-align: right; font-family: 'SuperSecret';" value="5.1" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.