[英]How to make text boxes aligned vertically?
一个简单的解决方案是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">
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>
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>
我建议使用
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.