简体   繁体   English

如何为右对齐添加空间<input>光标/插入符号和文本之间的元素?

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM