使用css在html中對齊文本框和標籤

當我每行只有1個標籤和1個文本框時。我使用float：left和float：right對齊它們，然後使用字段集合的寬度擠壓它們。使用css在html中對齊文本框和標籤

但我現在需要做的是每行3個標籤和3個文本框。任何想法如何對齊它們？

編輯：忽略的名字，我只是複製粘貼，使他們具有相同的名稱LOL

<fieldset style='width:auto;margin:auto;' class='hardwareavailabilityadd'> 
    <legend>Add Hardware Availability</legend> 
     <p> 
      <label class='hardwareavailabilityadd'>Hardware Type: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'> 
      <label class='hardwareavailabilityadd'>Repair Priority: </label><input type='text' required name='txtEmpLName' class='hardwareavailabilityadd'> 
      <label class='hardwareavailabilityadd'>RTP Target: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'> 
     </p> 

     <p> 
      <label class='hardwareavailabilityadd'>Hardware Name: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'> 
      <label class='hardwareavailabilityadd'>Date Needed: </label><input type='date' required name='txtEmpLName' class='hardwareavailabilityadd'> 
      <label class='hardwareavailabilityadd'>Shortages: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'> 
     </p> 

     <p> 
      <label class='hardwareavailabilityadd'>Facility: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'> 
      <label class='hardwareavailabilityadd'>Reason: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd' size='60'> 
     </p> 
</fieldset>

This is what I had in mind to happen

enter image description here

Current look without css

enter image description here

來源

2015-06-15 aozora

我建議你使用一個有經驗的框架，它有這個盒子，如Bootstrap ......但是，如果你想自己做，一個可能的方法如下：

fieldset { 
 
    width: 100%; 
 
} 
 
.row { 
 
    width: 100%; 
 
    clear: both; 
 
} 
 
.row div { 
 
    width: 33%; 
 
    float: left; 
 
} 
 
label { 
 
    display: block; 
 
    float: left; 
 
    width: 40%; 
 
    text-align:right; 
 
} 
 
input { 
 
    width: 50%; 
 
}

<fieldset style='width:auto;margin:auto;' class='hardwareavailabilityadd'> 
 
    <legend>Add Hardware Availability</legend> 
 
    <div class="row"> 
 
    <div><label class='hardwareavailabilityadd'>Hardware Type: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div> 
 
    <div><label class='hardwareavailabilityadd'>Repair Priority: </label><input type='text' required name='txtEmpLName' class='hardwareavailabilityadd'></div> 
 
    <div><label class='hardwareavailabilityadd'>RTP Target: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div><label class='hardwareavailabilityadd'>Hardware Name: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div> 
 
    <div><label class='hardwareavailabilityadd'>Date Needed: </label><input type='date' required name='txtEmpLName' class='hardwareavailabilityadd'></div> 
 
    <div><label class='hardwareavailabilityadd'>Shortages: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div><label class='hardwareavailabilityadd'>Facility: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div> 
 
    <div><label class='hardwareavailabilityadd'>Reason: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd' size='60'></div> 
 
    </div> 
 
</fieldset>

來源

2015-06-15 03:10:17 Dinei

謝謝這會做。我仍然是一個初學者，所以我不知道任何框架。但首先我會研究你給我的css代碼，以便我可以知道它是如何發生的。我喜歡標籤貼在文本框上。 – aozora

再多一點。我正計劃將原因文本框放在最後。但現在，如果我擴展它，它會下降。 – aozora

要做到這一點，你需要在原因的容器'div'中放置一個自定義類，並設置一些CSS使其使用寬度的'66％'而不是'33％'。您還需要更改標籤的寬度，因爲只要增加div的大小就會將這個標籤與其他標籤剝離，因爲它的大小取決於百分比。 – Dinei

使用css在html中對齊文本框和標籤

回答

相關問題