html - 我没有风格

Question

我在这个问题上焦头烂额，似乎我可能没有搜索正确的术语，我得到的谷歌结果似乎是一般布局类型的问题。

我有一些数据想在网页中表示。不同数据有20~30个字段。如果我用我所知道的来做，我会这样(总共 3 列和 30 行，每个字段都是不同的数据):

<table>
<tr><td>Field1:</td><td><input id="dataforField1"></input></td><td>Field2:/td><td><input id="dataforfield2"></td></tr>
<tr><td>Field3:</td><td><input id="dataforField3"></input></td><td>Field4:/td><td><input id="dataforfield4"></td></tr>
</table>

但是我最近一直在阅读，在呈现非表格数据时，div 更受欢迎。所以我尝试这样做:

<div style="float:left;">
<ul>
<li>Field1</li>
<li>Field2</li>
<li>Field3</li>
</ul>
</div>
<div style="float:left;">
<ul>
<li><input id="tag1...</li>
<li><input id="tag2...</li>
<li><input id="tag3...</li>
</ul>
</div>

但是我的字段标签没有与我的数据输入元素对齐。 Field1 似乎与 input1 水平匹配。但是当我到达 field10 时，它偏离了很多。我在没有 ul 和 li 的情况下尝试过，并在每个之后使用 br，但我似乎无法让它们排队。

问题:

1. 如果我不做表格，如何让它们匹配？
2. 我需要澄清“表格”一词。如果我的数据是一个表，它只会有 1 行。什么时候可以使用表格？
3. 人们在尝试实现类似的事情时会用什么来排列事物？

编辑:我希望 Field1 与输入标签 1 等水平对齐。编辑2:添加了一张图片以显示事情如何不一致。没有 li 也是一样。

Answer 1

我一般建议为此目的采用网格系统。有很多很棒的。我最喜欢的 Web 开发工具是 Bootstrap的格子。 Bootstrap 作为一个框架也很了不起。

我还将引用我对此的评论:

... It is really recommended to only use a table when you are actually willing to show a real table with information in it. The old way of presenting forms in tables to achieve alignment is just a no-no these days. Grid systems do it better and they are more responsive.

但是。

错位是由文本(标签)和输入字段之间的相关性丢失引起的。随着列表越来越长，比例正在下降。这是因为文本的高度与输入字段的高度不同。

CSS:

li {
    height: 40px;
}

这确保所有 <li>元素将具有相同的高度。当然，建议将样式应用于类而不是直接应用于元素，但这只是为了解决问题。

代码笔:http://codepen.io/arielweinberger/pen/jqveoX

我还没有设法重现你所说的你正在经历的事情。