问题
How would I create an HTML text box that exactly 3 characters can fit into it?
I found this online: <input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
It creates a text box with width of 10px. I could use this but I was wondering if we could explicitely set for 3 chars width instead of "playing" with pixels,
回答1:
Not reliably, since l and W have very different widths.
However, if you set the font to monospace, that helps. Then, you should be able to set size="3" on the input element, and in theory it should be exactly three characters wide.
回答2:
Use the ch metric.
width: 3ch;
Make sure your box-sizing property is set to content-box if you're changing left and/or right padding.
来源：https://stackoverflow.com/questions/16886674/specify-width-of-3-chars-for-an-html-input-text