我没有风格

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. 我需要澄清单词＆＃34;表格＆＃34;。如果我的数据是一个表，它将只有1行。什么时候可以使用桌子？
3. 人们在尝试实施类似的事情时会用什么来排列？

编辑： 我希望Field1与输入tag1水平对齐，依此类推。 EDIT2： 添加了一张图片，以显示事情是如何排队的。没有李就会一样。

Answer 1

我通常会建议为此目的采用网格系统。有很多很棒的。我最喜欢的Web开发是Bootstrap的网格。 Bootstrap作为一个框架也很棒。

我还将添加一条关于此的评论引用：

  

...我们建议您在实际使用时只使用表格   愿意在其中展示包含信息的真实表格。旧的方式   在表格中呈现表格以实现对齐只是一个禁止这些   天。网格系统做得更好，响应更快。

然而

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

CSS：

li {
    height: 40px;
}

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

CodePen：http://codepen.io/arielweinberger/pen/jqveoX

我没有设法重新制作你所说的你正在经历的事情。

Answer 2

对于您应该使用的标签和输入，您猜对了：label s和input s。将每一对放在同一个父级下，使它们inline-blocks具有固定的宽度，然后你就可以了。不需要外部工具，这是最基本的工具。

＆＃13;

＆＃13;

label {
  margin-right: 10px;
  width: 120px;
  display: inline-block;
}

＆＃13;

<div style="float:left;">
<ul>
  <li><label>Field1</label><input/></li>
  <li><label>Field2</label><input/></li>
  <li><label>Field3</label><input/></li>
  <li><label>Field4</label><input/></li>
  <li><label>Field5</label><input/></li>
  <li><label>Long Field Name</label><input/></li>
  <li><label>Field6</label><input/></li>
  <li><label>Field7</label><input/></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;