css - 不使用表格设计此页面的正确方法

Question

这就是我所拥有的。我玩过 DIV 标签，但仍然不知道如何使用它们来设计这个页面？

我遇到的一个问题是我无法正确地将“别名”标签与其下方的 TextBox 对齐......并且还将这些控件放在同一行 - 例如参考序列和祖先是我无法解决的另一个问题修复。

Answer 1

尝试这个。它很可能会起作用。您可能需要根据需要调整一些样式值。

<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>

Answer 2

除非它是真正的表格数据，否则不应考虑表格。我建议蓝色和绿色空间是div具有固定宽度的元素，向左浮动。灰色div应该被清除。绿色和蓝色部分似乎是为了布局方便而分开的，并且不是相关内容，所以我不建议fieldset过度div元素。

如果你给label和input/select元素设置宽度和使用display: block，标签显示应该没有问题。Not Found 链接和复选框似乎是表单的唯一独特部分。

Answer 3

浮动顶部的 2 个 div（蓝色和绿色），为每个 div 设置一个宽度，然后在蓝色的那个上扔一个 margin-right（或者绿色的一个 margin-left）来获得你想要的红色空间。然后有底部 div 清除，因此它跳到下一行。

至于“别名”标签和对齐问题，我建议使用带有list-style:none. 每个标签都将独立运行li，每个输入也是如此。这应该会自动将它们左对齐排列，就像您当前的表格一样。另外，它的好处是不必硬设置宽度（如果在这种情况下可以说这是一个问题）。

示例标记

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