長標籤會導致表單中欄位的顯示發生變化
P粉312631645
P粉312631645 2024-02-26 20:51:43
0
1
349

我正在盡一切努力來調整這些欄位。

在較寬的螢幕上,它的顯示還可以,但在較小的螢幕上,標籤會變得太長,影響欄位的對齊。

目前看起來像這樣:

如果螢幕不夠寬,我計劃讓它們像這樣顯示:

到目前為止我的程式碼:

.column-50, .column-100 {
   float: left
}

.column-50 {
   width: 50%
}
.marginbottom-4 {
   margin-bottom: 1.2em
}
<div class="column-100 marginbottom-4">
  <div class="column-50" style="padding: 0 0.2em">
    <div>
      <label>LABEL HERE</label>
      <input type="text">
    </div>
  </div>
  <div class="column-50" style="padding: 0 0.2em">
    <div>
      <label>LONG LABEL GOES HERE</label>
      <input type="text">
    </div>
  </div>
</div>

    

已經嘗試過使用填充、垂直對齊、對齊內容,但也許我做錯了?

P粉312631645
P粉312631645

全部回覆(1)
P粉709307865

一種解決方案可能是使用表格


#
    
  #
    #
  
LABEL HERE LONG LABEL GOES HERE
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板