当前位置:  开发笔记 > 前端 > 正文

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

如何解决《在有效的XHTML中实现制表位的最佳方法是什么?》经验,为你挑选了2个好方法。

为了解释想象一个简单的地址.写在带有换行符的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)?



1> Kornel..:

我认为你已经把"桌子坏了"的概念推向极致.

纯粹用于布局的表格(当其他元素更具语义性时)是不好的.

表格数据表很好.他们的目的是为了这个目的!

您所拥有的内容非常符合行和列的概念,包含header()和data() - 基于语义,而不仅仅是布局.

如果你想更明确地说它是一个地址,那么使用adr Microformat或添加一个.

错误的方法:

:"1010"不是"邮政编码"的定义.另一种方式使它更有意义,但是这种关系与→ 一样清晰,它不依赖于CSS,并且看起来完美无需用户的字体大小.
如果你使用即使在lynx将完美呈现!没有CSS技巧的地址看起来很奇怪.

HTML的

元素可能不适用于此,因为它适用于页面作者/维护者的联系信息.它还允许内联内容,因此您将丢失地址的结构.



2> Eevee..:

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

:after如果您不介意刷掉IE6,您甚至可以使用自动添加冒号.

推荐阅读
mobiledu2402851377
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有