css – 5rem可以容纳10个字符怎么样？

我一直在玩单字形(因为每个字符都与下一个字符一样宽)以匹配输入字段的长度.我的问题是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>

http://codepen.io/alfredwesterveld/pen/RrypPv

解决方法

您要查找的单位是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 />

要回答你的问题,monopsace字符的高度往往是宽度的两倍.所以1ch≈0.5em和5em≈10ch.

css – 5rem可以容纳10个字符怎么样？

解决方法

相关文章