Question

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

Time:      5pm
Address:   Washington
Location:  Cafe

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

提前致谢。

Answer 1

尝试使用表格。我不确定你是否真的想这样做，但据我所知，它将满足你的需要。这是一个供您使用的简单表格：

<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属性设置表格的方式。我建议只调整桌子的整个宽度，以便你想要它等等。

Answer 2

将表格用于表格数据。但是，如果您只想将一些元素作为表格（即行/列）对齐，则可以调整div，p或span标记（或其他任何内容）以表格格式显示。

See Demo

根据评论更新

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

<强> CSS

#tabled {
    display: table;
    text-align: left;
}

#tabled span {
    display: table-cell;
    min-width: 4em; /* arbitrary width; adjust as necessary */
}

#tabled span.left {
    text-align: left;
}

Answer 3

您可以使用带有显示屏的＆＃39;内嵌块＆＃39;值和一些固定宽度，如：

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

如何使用HTML或CSS缩进

3 个答案: