html - 为什么字体大小会增加输入的宽度

我想知道为什么在HTML font-size上设置input CSS属性会自动增加其宽度？

我知道为什么它会增加高度，但是我希望input在更改font-size时保持相同的基本宽度。

我问的原因是因为它破坏了我正在构建的flex布局，其中有一个input。当我增加字体大小时，input完全脱离了布局。

这是一个( react 的)复制品:

<div
  style={{
    backgroundColor: 'blue',
    display: 'flex',
    flexDirection: 'column',
    maxWidth: 400,
    padding: 20,
    alignItems: 'center',
  }}
>
  <div style={{ display: 'flex' }}>
    <span>Some text</span>
    <input style={{ 'font-size': 20 }} />{' '}
  </div>

  <div style={{ display: 'flex' }}>
    <span>Some text</span>
    <input style={{ 'font-size': 50 }} />
  </div>
</div>

有没有解决此问题的干净方法？

最佳答案

您可以在输入上使用100％宽度或固定宽度。另外，要使此功能在IE中正常运行，您还需要从最外面的div中删除alignItems: 'center'

<div
    style={{
        display: 'flex',
        flexDirection: 'column',
        maxWidth: 400,
        padding: 20,
    }}
>
    <div style={{ display: 'flex' }}>
        <span>Some text</span>
        <input style={{ 'font-size': 20, width: "100%", boxSizing: "border-box" }} />
    </div>

    <div style={{ display: 'flex' }}>
        <span>Some text</span>
        <input style={{ 'font-size': 50, width: "100%", boxSizing: "border-box" }} />
    </div>
</div>

对于firefox，您必须将输入包装在容器中，然后将flex: 1 1 auto;应用于该容器。

希望能有所帮助

关于html - 为什么字体大小会增加输入的宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49284045/