输入为什么不尊重 flex?
flex not respected by Input why?
我注意到 'input' 元素不会拉伸或收缩以填充弹性容器。有谁知道为什么以及是否有解决方案?
我下面的示例显示容器 class c 被用于 Div 元素(正确拉伸)。以及单个classe,用于右对齐的定长端。 div 行按预期伸展和收缩,输入行没有。
div.c {
display: flex;
flex-direction: row;
align-content: stretch;
}
div.d {
flex: 1;
}
div.e {
display: inline-block;
flex: 0 0 30px;
background-color: red;
}
<div class='c'>
<div class='d'>A</div>
<div class='d'>B</div>
<div class='d'>C</div>
<div class='d'>D</div>
<div class='e'>E</div>
</div>
<div class='c'>
<input class='d'></input>
<input class='d'></input>
<input class='d'></input>
<input class='d'></input>
<div class='e'></div>
</div>
注意我知道这个link:
但是使用最小宽度:0;框大小:边框框;对我没有影响。
因为您指定的 div.d
而不是 input.d
或 div .d
或只是 .d
。另外,不需要关闭 input
标签。
div.c {
display: flex;
flex-direction: row;
align-content: stretch;
}
.d {
flex: 1;
}
div.e {
display: inline-block;
flex: 0 0 30px;
background-color: red;
}
<div class='c'>
<div class='d'>A</div>
<div class='d'>B</div>
<div class='d'>C</div>
<div class='d'>D</div>
<div class='e'>E</div>
</div>
<div class='c'>
<input class='d'>
<input class='d'>
<input class='d'>
<input class='d'>
<div class='e'></div>
</div>
我注意到 'input' 元素不会拉伸或收缩以填充弹性容器。有谁知道为什么以及是否有解决方案?
我下面的示例显示容器 class c 被用于 Div 元素(正确拉伸)。以及单个classe,用于右对齐的定长端。 div 行按预期伸展和收缩,输入行没有。
div.c {
display: flex;
flex-direction: row;
align-content: stretch;
}
div.d {
flex: 1;
}
div.e {
display: inline-block;
flex: 0 0 30px;
background-color: red;
}
<div class='c'>
<div class='d'>A</div>
<div class='d'>B</div>
<div class='d'>C</div>
<div class='d'>D</div>
<div class='e'>E</div>
</div>
<div class='c'>
<input class='d'></input>
<input class='d'></input>
<input class='d'></input>
<input class='d'></input>
<div class='e'></div>
</div>
注意我知道这个link:
但是使用最小宽度:0;框大小:边框框;对我没有影响。
因为您指定的 div.d
而不是 input.d
或 div .d
或只是 .d
。另外,不需要关闭 input
标签。
div.c {
display: flex;
flex-direction: row;
align-content: stretch;
}
.d {
flex: 1;
}
div.e {
display: inline-block;
flex: 0 0 30px;
background-color: red;
}
<div class='c'>
<div class='d'>A</div>
<div class='d'>B</div>
<div class='d'>C</div>
<div class='d'>D</div>
<div class='e'>E</div>
</div>
<div class='c'>
<input class='d'>
<input class='d'>
<input class='d'>
<input class='d'>
<div class='e'></div>
</div>