输入文本框宽度和字体宽度答案

【问题标题】：Input textbox width and font width输入文本框宽度和字体宽度
【发布时间】：2014-06-24 05:22:48
【问题描述】：

我想创建一个统一的类来设置文本和文本输入框的宽度，以便任何平台都可以内联打印预定义和用户输入的数字。到目前为止，似乎没有办法让输入文本框和字体宽度在所有平台上都相等？

【问题讨论】：

你必须更具体..什么是字体宽度？什么平台？ “内联打印预定义和用户输入的数字”是什么意思？

标签： css text input fonts box

【解决方案1】：

字体在不同操作系统上的宽度略有不同。您可以做的最好的事情是选择一个固定宽度的通用字体，这样您就可以在每个系统上使用相同（非常相似）的字体。然后，使用css设置文本框的宽度width: XXXpx;

我会从这个字体开始：

http://www.google.com/fonts#UsePlace:use/Collection:Droid+Sans+Mono

（不知道为什么链接会重定向。尝试复制/粘贴）

这会让你非常接近。

【讨论】：

我不知道固定宽度字体。这很有趣也很有帮助。谢谢你。但是，我仍然认为特定固定宽度字体的宽度与分配的像素宽度之间存在严重差异，例如 iPad 和 IE。我想我可能必须为每个数字创建一个除法，无论是我把它放在屏幕上还是用户输入它，如果我想让它们都排成一行？
不，试试看。它们在不同设备上非常相似。
感谢您的鼓励。在这个项目中，文本框宽度和文本宽度之间的不同比率对我来说仍然是一个问题，即使像素设置对所有人来说都是相同的。看起来我要么必须设计特定于平台的代码或每个数字的除法元素。对我来说太糟糕了，银行家和小学生需要使用相同类型的工具。
看来我只是屈服于无谓的厌世症，而实际的解决方案是将padding设置为0，因为不同的平台具有不同的默认文本框填充。
是的，明确设置样式（包括填充）总是好的。不确定我们针对谁的厌世评论。

【解决方案2】：

正常内容中的一串数字可能与作为文本输入框的值的一串数字的宽度不同的原因有以下几种：字体可能不同，字体大小可能不同，输入框默认情况下可能有一些填充、一些边距或一些边框。要解决此问题，请显式设置这些属性。示例：

<style>
span, input {
  font-family: Arial, sans-serif;
  font-size: 100%;
  padding: 0;
  margin: 0;
  border: none;
}
</style>
<span>1234567890</span><br>
<input value=1234567890>

然后输入框的值看起来像正常的内容，这是一个严重的可用性问题。为了解决这个问题，为两个元素设置一个相同宽度的边框，但为span 设置一个透明的边框：

<style>
span, input {
  font-family: Arial, sans-serif;
  font-size: 100%;
  padding: 0;
  margin: 0;
  border-width: 1px;
}
span {
  border-style: solid;
  border-color: transparent;
}
</style>

（由于transparent as border-color 值并未得到普遍支持，因此使用与封闭元素的背景颜色匹配的特定颜色值可能更安全。）

【讨论】：

感谢您的帮助！