我一直在玩弄单字体(因为每个字符都和下一个字符一样宽)以匹配输入字段的长度。
为什么 5rem 等于 10 个字符？在 Chrome 和 Firefox 中进入我的输入字段？您希望 10 个字符的宽度为 10rem:
input[type="text"] {
border: 0;
outline: 0;
background: transparent;
border-bottom: 2px solid black;
font-family: 'monospace';
overflow: hidden;
width: 5rem;
}<body id="body">
<form onSubmit="return false">
<input type="text" placeholder="your name" maxlength="10" required />
<input type="submit" />
</form>
</body>最佳答案
你要找的单位是ch:这个单位表示当前字体中字符'0'的宽度。在等宽字体中，1ch 相当于所有字符的宽度。
input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 2px solid black;
font-family: monospace;
width: 9ch;
}<input type="text" placeholder="your name" maxlength="10" required />为了回答您的问题，单幅字符的高度通常是其宽度的两倍。所以 1ch ≈ 0.5em 和 5em ≈ 10ch。
关于html - 为什么5rem可以装10个字符？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35050986/