在有效的XHTML中实现制表符的最佳方法是什么？ [英] Best way to implement tab stops in valid XHTML?

问题描述

为了说明想象一个简单的地址。写在具有换行符的HTML段落中：

 街道：示例街1 
城市：维也纳
邮递区号：1010 
国家：奥地利
  

大部分时间是完全正常的，但有时我必须实现以下输出：

 街道：示例街1 
城市：维也纳
邮政编码：1010 
国家：奥地利
  

我的想法到目前为止：

1. 应该是有效的XHTML，并在所有主要浏览器中正常工作或降级


2. 以语义正确的方式使用标记非常喜欢


3. 因为第二点：我希望有一个比表格更好的解决方案


4. 问题不仅限于地址 -
   
   class =h2_lin>解决方案

我发现定义列表比这里的表更有意义。将具有特定宽度的 dt 浮动到左侧，并在左侧清除。如果标签或数据要包装，你必须做一些post-element-float-clearing技巧，使这项工作，但它听起来不像你会需要。 （我认为这是值得的，无论如何，再加上，一次，你永远不会再做它。）

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

For explanation imagine a simple address. Written in a HTML paragraph with line breaks it would like this:

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

Most of the time that's completely okay, but sometimes I have to achieve the following output:

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

My thoughts so far:

1. Should be valid XHTML and work or degrade gracefully in all major browsers
2. Using tags in a semantically correct way is strongly preferred
3. Because of point two: I hope there's a better solution than tables
4. The problem is not limited to addresses - would be useful in other situation too

How do you achieve this output (using HTML and/or CSS)?

解决方案

I find that definition lists make much more sense than tables here. Float the dt to the left with a specific width and have it clear on the left. If either the label or the data are going to wrap, you'll have to do some post-element-float-clearing trickery to make this work, but it doesn't sound like you'll need that. (I think it's worth it, anyway; plus, do it once and you'll never have to do it again.)

You can even use :after to add the colons automatically, if you don't mind brushing off IE6.

这篇关于在有效的XHTML中实现制表符的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！