我有一個簡單的css網格布局，當我添加一個表單<input />時，它會導致該列增長。我希望輸入能夠填滿這一列，而不是讓它增長。
我已經嘗試添加min-width: 0和overflow: hidden，但兩者都不能阻止該列的增長。如果我用max-width使輸入變小，那么列就會回到我想要的大小（最小的包含文本）。但是我希望表單輸入能夠填滿整個列。
<div style="display: grid; grid-template-columns: auto auto 1fr">
<div style="background: red">Hello</div>/span>
<div style="background: green">是的，我是一個大長</div>/span>
<div style="background: blue">no</div>/span>
<div style="background: red">Hello</div>/span>
<div style="background: green"><input placeholder="input" /> </div>>
<div style="background: blue">no</div>
</div>
下面是它的樣子。
我做了一個codepen來玩這個。我只需要它在 Chrome 瀏覽器中作業，但我已經驗證了我在 Mac OSX 上的 Chrome、Safari 和 Firefox 中得到了同樣的行為。
uj5u.com熱心網友回復：
簡單地添加width:0;min-width:100%;（相關問題。如何將文本的寬度與動態大小的影像/標題的寬度相匹配？）
<div style=display: grid; grid-template-columns: auto auto 1fr">
<div style="background: red">Hello</div>/span>
<div style="background: green">是的，我是一個大長</div>/span>
<div style="background: blue">no</div>/span>
<div style="background: red">Hello</div>/span>
<div style="background: green">yes</div>
<div style="background: blue">no</div>
</div>/span>
<p> 添加輸入 </p>
<div style="display: grid; grid-template-columns: auto auto 1fr"/span>>
<div style="background: red">Hello</div>/span>
<div style="background: green">是的，我是一個大長</div>/span>
<div style="background: blue">no</div>/span>
<div style="background: red">Hello</div>/span>
<div style="background: green"><input style="width: 0;min-width:100%;" placeholder="input" /></div>
<div style="background: blue">no</div>/span>
</div>uj5u.com熱心網友回復：
你需要定義網格中的行/列的數量以及它們的尺寸。
。<div style=display: grid; grid-template-columns: auto 120px 1fr">
<div style="background: red">Hello</div>/span>
<div style="background: green">是的，我是一個大長</div>/span>
<div style="background: blue">no</div>/span>
<div style="background: red">Hello</div>/span>
<div style="background: green"><input placeholder="input" /> </div>>
<div style="background: blue">no</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/309063.html
標籤：