如何在 CSS 中縮排後續換行標籤行？

縮排換行標籤文字的後續行

當面臨表單寬度的限制時，標籤文字可以換行到多行，從而產生美觀效果的擔憂。雖然第一行由於輸入元素的存在而縮進，但後續行可能不會縮進，從而產生不均勻的外觀。

要僅使用CSS 實現縮排第二行和後續行，請考慮使用以下方法：

使用類別"checkbox-field" 將輸入元素及其標籤包含在父容器中。將此父級的顯示屬性設為 "flex" 並將 flex-direction 設為 "row"。

<code class="css">.checkbox-field {
  display: flex;
  flex-direction: row;
}</code>

範例用法：

<code class="html"><div class="checkbox-field">
  <input type="checkbox" id="check">
  <label for="check">Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</label>
</div></code>

此解決方案靈活地將標籤文字調整為可用寬度，同時保持一致的視覺外觀。

以上是如何在 CSS 中縮排後續換行標籤行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！