如何使文本框垂直對齊？

Question

我有兩個相互重疊的文本框，如下所示：

文本框的定位方式取決於其前面的文本； 文本越長，文本框越靠右。 如何使兩個文本框垂直放置在同一位置，彼此堆疊？

Answer 1

一個簡單的解決方案是CSS-Grid ，它將創建一個類似表格的布局：

 body { display: grid; grid-template-columns: min-content auto; grid-gap: 10px; } /* counters the linebreak at white-space caused by min-content */ label { white-space: nowrap; }

 <label>Sceenshot 1.png</label> <input type="text"> <label>Sceen Shot 2022-06-21 at 5.58.05 PM.png</label> <input type="text">

Answer 2

1. 使用CSS GRID和grid-template-columns: auto 1fr; 對於另一個附近的元素。

 <div id="container" style=" display: grid; grid-template-columns: auto 1fr; gap: 0.5rem;"> <!-- 1 --> <span>small text</span> <input type="text"> <!-- 2 --> <span>longer text, longer text...</span> <input type="text"> </div>

2. 只需將display: grid添加到父元素，如果您希望每個元素都在另一個元素之下

 <div id="container" style="display: grid;"> <!-- 1 --> <span>small text</span> <input type="text"> <!-- 2 --> <span>longer text, longer text...</span> <input type="text"> </div>

3. 我建議使用<label>而不是普通的<span> ！ 以幫助可訪問性。 事實上，如果用戶點擊<span>它將自動關注<input>

 <div id="container" style="display: grid; grid-template-columns: auto 1fr; gap: 0.5rem;"> <!-- 1 --> <label for="first-input"> <span>small text</span> </label> <input type="text" id="first-input"> <!-- 2 --> <label for="second-input"> <span>longer text, longer text...</span> </label> <input type="text" id="second-input"> </div>