css - 一行多个框的 HTML 布局

Question

我正在为这个看似简单的问题而烦恼，也许有人可以提供帮助。我想要任意数量的输入，带有标签，像图像中那样水平堆叠在一行上。

Answer 1

有很多方法可以解决这个问题。就个人而言，我喜欢对此类数据使用表格(但如果不是表格数据，建议使用其他方式，如 DIV)。我将尝试展示一个表格的简单示例:

表:

<table width="100%" cellpadding="0" callspacing="0" border="0">
 <tr>
  <td width="200">LABEL 1</td><td>&nbsp;</td> <!-- this is the padding table cell -->
  <td width="200">LABEL 2</td><td>&nbsp;</td>
  <td width="200">LABEL 3</td><td>&nbsp;</td>
 </tr>
</table>

Example Table JSFiddle

使用 Div 稍微复杂一些，因为它们默认是内联的；你会在不同的行上得到你的标签。您可以查看“display: table-cell”等 CSS 属性以获得与上述相同的结果，否则您可以使用 CSS 查看绝对和相对定位。

<div width="100%">
 <div style="position:absolute; top:0px; width: 33%;">LABEL 1</div>
 <div style="position: absolute; top:0px; left: 33%; width: 33%;">LABEL 2</div>
 <div style="position: absolute; top:0px; left: 66%; width: 34%;">LABEL 3</div>
</div>

但是，这仍然存在一些问题，因为它假设您的布局是页面/浏览器查看区域宽度的 100%。