在表單中正確對齊輸入旁的標籤
表單設計中的常見場景是將標籤與其輸入欄位旁邊正確對齊。要實現這種對齊，請考慮以下方法：
為標籤元素確定合適的固定寬度並使用 width 屬性指派它。將標籤的顯示屬性設定為 inline-block 。使用 text-align: right 將標籤內的文字向右對齊。
以下是範例程式碼片段：
<code class="css">label {
display: inline-block;
width: 140px;
text-align: right;
}</code><code class="html"><div class="block"> <label>Simple label</label> <input type="text"> </div> <div class="block"> <label>Label with more text</label> <input type="text"> </div> <div class="block"> <label>Short</label> <input type="text"> </div></code>
此方法使用固定寬度，這可能並不理想用於響應式設計。考慮使用 Flexbox 或 CSS 網格來獲得響應更快的解決方案。
以上是如何在表單中正確對齊輸入旁邊的標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
