正確的方式來設計這個網頁，而不使用表格

Question

這是我的。 我玩過DIV標籤，但仍然無法弄清楚如何使用它們來設計這個頁面？

的我有一個問題是，我不能正確對齊與其文本框「別名」標籤，該標籤下吧...也把這些控件在同一行 - 例如參考序列和祖先是我還無法修復的另一個問題。

Answer 1

不應該考慮表格，除非它是真正的表格數據。我建議藍色和綠色空間爲div設置寬度的元素，向左浮動。灰色的div應該被清除。綠色和藍色部分似乎是爲了佈局方便而分開的，並且與內容無關，所以我不會推薦fieldset而不是div元素。

如果您給label和input/select元素設置寬度並使用display: block，則標籤顯示應該沒有問題。未找到鏈接和複選框似乎是表單中唯一唯一的部分。

Answer 2

浮動頂部2個div（藍色和綠色），爲每個人設置一個寬度，並在藍色邊緣（或綠色邊緣左側的邊緣）上留下邊距，以獲得您想要的紅色空間然後清除底部div，以便跳到下一行。

至於「別名」標籤和對齊問題，我建議使用list-style:none的無序列表。每個標籤都將自己的li，每個輸入。這應該自動將它們排成左對齊，就像您當前的表單一樣。另外它具有不必硬化寬度的好處（如果在這種情況下可以說這是一個問題）。

例如標記

<li><label>Alias</label></li> 
<li><input type='text'></li> 

Answer 3

試試這個。它很可能會起作用。 您可能需要調整少數樣式值以滿足您的需求。

<div style="clear:both"> 
    <div id="topLeft" style="float:left;width:400px;padding:7px"> 

    <div style="clear:both;margin:5px 0"> 
     Gene Symbol 
    </div> 
    <div style="clear:both;margin:5px 0"> 
     //drop 'Gene Symbol Search Box' here 
    </div> 


    //repeat Gene Symbol like divs for other elements 

    </div> 

    <div id="topSeparator" style="float:left;width:10px"> 
    &nbsp; 
    </div> 

    <div id="topRight" style="float:left;width:400px;padding:7px"> 
    <div style="clear:both;margin:5px 0"> 
     Alias 
    </div> 
    <div style="clear:both;margin:5px 0"> 
     //drop 'Alias Box' here 
    </div> 


    //repeat Alias like divs for other elements 

    </div> 
</div> 
<div style="clear:both;margin:10px 0 0 0;padding:7px"> 
    <div style="clear:both;margin:5px 0"> 
    //drop checkbox here 
    </div> 
    <div style="clear:both;margin:5px 0"> 
    //drop buttons here 
    </div> 
</div>