Question

输入大小似乎忽略了size属性，而是为父元素设置了100％的宽度。

的CSS：

.lespan {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: red;
  min-width: 300px;
  input {
    min-width: 0px;
    size: 5;
  }
}

input {
  min-width: 0px;
  size: 5;
}

HTML：

<span class="lespan">
  hello
  <input type="text">
</span>
<input type="text">

Codepen：https://codepen.io/basickarl/pen/Lybvyz

我希望两个输入都是5号。

Answer 1

你指的是错误的问题停止使用无效的属性值。 Size是属性，属性属于HTML。 Set input size attribute with CSS?

始终在浏览器中检查您的代码如果要设置大小，请设置输入的宽度。

＆＃13;

.lespan {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: red;
  min-width: 300px;
}

input {
  width: 100px;
}

＆＃13;

<span class="lespan">
  hello
  <input type="text" >
</span>
<input type="text">

＆＃13;

Answer 2

size不是有效的css属性，而是html属性。你可能想要这样设置它们：

<input type="text" size="5">

此外，display:flex会破坏输入的尺寸属性值，您可能希望使用display:block，使用css width属性代替size或更改html结构，以便输入元素位于具有display:flex

的容器之外

此外，您无法嵌套样式，使用其标记名称和类名称将特定样式应用于元素，您可能希望尝试这样的事情：

input.lespan {
    min-width: 0px;
    size: 5;
}

Answer 3

只需将align-items: flex-start;添加到.lespan即可。这是更新的CodePen

.lespan {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: red;
  min-width: 300px;
  align-items: flex-start;
}

.lespan input {
  min-width: 0px;
  size: 5;
}

input {
  size: 5;
}

<span class="lespan">
  hello
  <input type="text">
</span>
<input type="text">

Answer 4

您可以使用css width属性：

input{
  width:200px;
  }

或者html

<input type="text" size="5">

输入大小被忽略并被设置为父元素

4 个答案: