Question

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

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

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

这是一个（反应）再现：

<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>

有没有一种干净的方法来解决这个问题？

Answer 1

<input>标记是replaced elements之一，它们通常具有内在维度。

在flexbox中，您可以通过添加：

来覆盖内在大小

input {
  min-width: 0;
}

或者，给它一个比默认值20更小的size：

<input size="1">

然后根据需要使用flex / flex-grow / flex-basis或width设置所需尺寸。

Answer 2

您可以在输入上使用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;应用于容器。

希望有所帮助

为什么font-size会增加输入的宽度

2 个答案: