如何使用HTML或CSS缩进

我想知道我如何使用HTML和CSS缩进来做类似的事情

Time:      5pm
Address:   Washington
Location:  Cafe

基本上，我想让信息对齐，尝试使用列表，但这不起作用

---

提前谢谢。

试着用桌子。我不确定你是否真的想这样做，但据我所知，这会满足你的需要。这里有一个简单的表格供您使用：

<table width="100%" border="0">
  <tr>
    <td>Time:</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Date:</td>
    <td>No?</td>
  </tr>
  <tr>
    <td>Bilbo:</td>
    <td>Baggins</td>
  </tr>
</table>

时间：
对
日期：
不
比尔博：
巴金斯

---

编辑：使用CSS和HTML属性设置表格的格式。我建议只需根据需要调整表格的整个宽度，等等。

将表格用于表格数据。但是，如果您只想将一些元素作为表格（即行/列）对齐，则可以调整

div

、

p

、或

span

标记（或其他任何标记）以表格格式显示

根据评论更新

HTML

<div id="tabled">
    <p>
        <span class="left">Date:</span><span>today</span>
    </p>
    <p>
        <span class="left">Address:</span><span>today</span>
    </p>
    <p>
        <span class="left">Location:</span><span>today</span>
    </p>
</div>

---

可以使用显示“内联块”值和某些固定宽度的跨距，如：

<style type="text/css">
.fixed-length{
   display:inline-block;
   width:100px;
}
</style>
<span class="fixed-length">something</span>

.固定长度{
显示：内联块；
宽度：100px；
}
某物

您尝试过使用吗？您也可以使用浮动div来创建此效果，请参见我的小提琴：您可以设置

#left>div{text align:left；}

将文本向左对齐

width=“100%”“

不是必需的，甚至可能有害（表格扩展到HTML页面的全宽）。如果将其删除，浏览器将扩展每一列，使其仅适合其最宽的单元格。表格最适合这种情况，因为它可以自动缩放列的宽度-无需设置固定宽度。此用例可能会使表格成为最佳选择（表格式数据等），但是，您可能希望包括一个警告，即尝试在您的所有设计中使用摆振表来“对齐”其他视觉元素是一个巨大的禁忌。我本想提到跨度，但决定不提。首先，您不应该以像素为单位指定宽度；改为使用

em

，因为这将随字体大小进行缩放。更重要的是，这要求您必须提前知道宽度。对于表格，您不需要这样做，浏览器将为您计算正确的列宽。对

px

vs

em

（我知道差异）进行公平评估，但这不是一项要求（我只是出于说明目的添加了它）-但即使浏览器可以计算正确的列宽，它们可能因表而异（因为我们不知道值的宽度），因此您的布局受数据的支配，在我看来，这使得您的设计容易出现不期望的结果（即元素没有完全对齐）。答案使用了不适当的

标签（
标签
用于标记控件）并以像素为单位设置任意最小宽度。感谢反馈人员调整代码以反映建议的改进。仍然保留“任意”最小宽度，因为它不符合要求。我不确定这是否回答了在表格中正确对齐多个（六个？）元素的问题format@blurfus确实如此，想象6个跨度，每个奇数跨度将得到上述css，每个偶数跨度之后，您将得到一个

。然而，固定宽度在这里是不可能的。@modiX好吧，答案——目前的情况——不是这样的。只有当视口足够大时，增强的答案才有效。
<style type="text/css">
.fixed-length{
   display:inline-block;
   width:100px;
}
</style>
<span class="fixed-length">something</span>