使用css創建表單

Question

第一次來。 我想使用CSS來設計窗體，但完全失敗。形式是在http://opm.nulep.org/2012-10-17-04-17-46/alrep.html

我想字段是在垂直列。

Answer 1

你是說在一條線上有三個彼此相鄰的？

在這種情況下，您可以將您的h3和div換成另一個div中的每個字段，這樣會有一個aprox。一個300像素的寬度和一個浮動。

HTML

<form> 
    <div class="column"> 
     <h3>...</h3> 
     <div>form item</div> 
    </div> 
    <div class="column"> 
     <h3>...</h3> 
     <div>form item</div> 
    </div> 
    <div class="column last"> 
     <h3>...</h3> 
     <div>form item</div> 
    </div> 
</form> 

CSS

.column {float: left; width : 300px; margin-right : 10px;} 
.last {margin-right: 0;} 

則調整寬度和餘量，以適應​​你的母親格！

Answer 2

您可以使用表格或浮動的div。 每種解決方案都有優點和缺點。

股利溶液：

<style type="text/css"> 
    .column { width: 200px; float: left; } 
    .clear { clear: both } 
</style> 
<form> 
    <div class="column"> 
     <input /> 
     ... 
    </div> 
    <div class="column"> 
     <input /> 
     ... 
    </div> 
    <div class="clear"></div> 
</form> 

表：

<form> 
    <table> 
     <td> 
      <input /> 
      ... 
     </td> 
     <td> 
      <input /> 
      ... 
     </td> 
    </table> 
</form> 

Answer 3

那麼，在這種情況下，我建議使用<div> s表示各自25％的寬度或表。表格通常較笨重，並且不推薦，儘管我只是爲了給你一個選擇而提及它們。

如果你想使用四列的佈局<div> S，嘗試這樣的事情：

<form> 
    <div style="width: 25%; float: left;">Contractor options here...</div> 
    <div style="width: 25%; float: left;">District options here...</div> 
    <div style="width: 25%; float: left;">Subcounty options here...</div> 
    <div style="width: 25%; float: left;">End date options here...</div> 
</form> 

我建議移動style選項，即外部樣式表或內部樣式表（所以不管是樣式表.css文件或僅位於<style>標記之間的文件頂部）。

對於表，遵循這樣的事情：

<form> 
    <table> 
     <tr> 
      <td>Contractor options here...</td> 
      <td>District options here...</td> 
      <td>Subcounty options here...</td> 
      <td>End date here...</td> 
     </tr> 
    </table> 
</form> 

同樣，我不推薦使用表格來佈局，因爲它是一個更好的做法是將其用於實際tabular data，但初學者通常會發現表可以更容易使用。

祝你好運。

Answer 4

您應該將每個h3 &下拉div放在寬度爲200px的浮動div中。 6px的右邊距（前兩個div封裝）在它們中的3個之間保持一點距離。

HTML（4次）：

<div class="dropdown_wrapper"> 
    <h3 ...> 
    <div>...</div> 
</div> 

CSS樣式表內：

.dropdown_wrapper { float: left; width: 200px; margin-right: 6px; } 
.dropdown_wrapper:last-child { margin-right: 0 }