Question

为了解释想象一个简单的地址。写在带有换行符的HTML段落中，它会这样：

Street: Example Street 1
City: Vienna
Zip Code: 1010
Country: Austria

大部分时间都完全没问题，但有时我必须达到以下效果：

Street:   Example Street 1
City:     Vienna
Zip Code: 1010
Country:  Austria

到目前为止我的想法：

应该是有效的XHTML并在所有主流浏览器中正常工作或降级
强烈建议以语义正确的方式使用标签
由于第二点：我希望有比桌子更好的解决方案
问题不仅限于地址 - 在其他情况下也很有用

如何实现此输出（使用HTML和/或CSS）？

Answer 1

我认为你把“桌子坏”概念推向极致。

纯粹用于布局的表格（当其他元素更具语义性时）是不好的。
表格数据的表格很好。它们的目的是为了这个目的！

你所拥有的内容非常符合行和列的概念，包括标题（<th>）和数据（<td>） - 基于语义，而不仅仅是布局。

如果您想更明确地说明它是地址，请使用adr Microformat或添加<caption>。

错误的方法：

<dl>：“1010”不是“邮政编码”的定义。另一种方式使它更有意义，但<th>→<td>的关系同样清晰，它不依赖于CSS，并且看起来完全无需用户的字体大小。<登记/> 如果您使用<th>，即使在lynx 中也会完美呈现！没有CSS技巧的<dl>地址看起来很奇怪。

HTML的<address>元素可能不适用于此，因为它仅适用于页面作者/维护者的联系信息。它还只允许内联内容，因此您将丢失地址的结构。

Answer 2

我发现定义列表比这里的表更有意义。将dt以特定宽度浮动到左侧并在左侧清除。如果标签或数据要包装，你将不得不做一些post-element-float-clearing trickery来使这个工作，但听起来并不像你需要那样。（无论如何，我认为这是值得的;加上，做一次，你再也不用了。）

如果你不介意刷掉IE6，你甚至可以使用:after自动添加冒号。

Answer 3

不要听那些说这是表格数据的人。只是因为某些东西已经成排出现，它并没有成为一张桌子！

使用dl，dt和dd标记是一种很好的情况。它是一个位，与它们最初的用途相比，但它仍然比表格，跨度或div更有意义。

<dl>
    <dt>Street</dt>
    <dd>Example Street 1</dd>
    <dt>City</dt>
    <dd>Vienna</dd>
    <dt>Zip Code</dt>
    <dd>1010</dd>
    <dt>Country</dt>
    <dd>Austria</dd>
</dl>

CSS：

dt {
    width: 150px;
    float: left;
    clear: left
}
dd {
    float: left;
}

这是相当基本的CSS - 它可能不会适应很多情况（例如：连续两个dd，一个很长的dt），但这是一个开始。查看inline-block的{{1}}属性，也许不是使用dt，而是可以在float上设置left-margin 150px }。

Answer 4

表格是要走的路。

Answer 5

正如其他人所提到的那样，浮动元素是前往这里的方式。

这将是我的解决方案：

<p class="details">
    <span class="label">Street:</span>
    Some Street or other.
    <br />

    <span class="label">City:</span>
    A City.
    <br />
</p>

CSS看起来像这样：

p.details {
    padding-left: 200px;
}

p.details span.label {
    float: left;
    clear: left;
    width: 200px;
    margin-left: -200px;
}

因为主要文本不是浮动的，所以这可以避免文本很长且需要包装的任何问题;它会阻止浮动元素变宽，然后浮动到标签下方。这意味着当这个文本是多行的时候也不需要特殊情况，比如说，如果你想要一个多行地址。

同样，如果标签数据需要包裹多行，这个方法也有效，因为下一个标签会清除前一个浮点数。

在那里使用换行符意味着它也会很好地降级，看起来就像你不使用CSS时所期望的那样。

此方法适用于布局表单，其中使用<label>元素而不是跨度，并且可以在CSS中选择段落作为<form>的子句的任何段落

Answer 6

不需要表格（在这种情况下表格不是真的不合适）。我一直这样做。

<div class=DetailsRow>
  <div class=DetailsLabel>Street</div>
  <div class=DetailsContent>123 Main Street</div>
</div>
<div class=DetailsRow>
  <div class=DetailsLabel>City</div>
  <div class=DetailsContent>Vienna</div>
</div>
  ...etc

和

div.DetailsRow
{
clear:both;
}

div.DetailsLabel
{
float:left;
width:100px;
color:gray;
}

div.DetailsContent
{
float:left;
width:400px;
}

在有效的XHTML中实现制表位的最佳方法是什么？

7 个答案: