雅虎用户界面博客（YUIBlog）

方向的导航栏

2011年4月25日9:12分由亨利Koblentz |在CSS的101个 ， 发展 | 3条评论

我最近碰到一个水平右对齐链接导航菜单。 正如您所期望的，它是一个元素的名单float:right和列表项的float:left 。 即使有什么方法不对的，它启发了我借此机会讨论方向性的布局。

要素成本的浮动

花车没有方向性的概念，他们不喜欢内联元素或工作表列（该dir属性是一个神奇的子弹）。 随着彩车，作家必须实现一个机制，以“交换”的价值观时的界面的变化（ ltr对比rtl ）。

因此，而不是使用float ，作者可能有利于inline-block 。 下面是一个简单的例子：

 ul { text-align: end; text-align: right\9; *text-align: right; } li { display: inline; } a { display: inline-block; padding: 5px 15px; margin: 0 5px; } 

请注意，使用“ \ 0 “（无空格），而不是” \9 “将采取戏曲照顾，但不得作为证据作为未来的” \9 “（即只）。

由于这个演示页显示，在Chrome，Safari和Firefox中， inline-block技术使得布局写作模式依赖（流方向的匹配值的dir属性，或者在没有方向的初始值，如果指定）。 对于其他UA的孩子，因为IE的缺乏支持属性选择器（即html[dir="rtl"] ），作者需要添加一个标记，以应付在钩的方向改变。 例如，对于全面A级兼容性：

对于浮动的技术：

 .rtl ul { float: left; } .rtl ul li { float: right; } 

对于inline - block的技术：

 .rtl ul { text-align: left\9; /* IE8/9 */ *text-align: left; /* IE5/6/7 */ } 

text-align: start | end

不像left和right ， start和end正在编写模式依赖于关键字。 在英语中， start映射到left ，并end映射到right 。 依托start和end ，而不是left与right允许一些浏览器做交换（ ltr / rtl ） 自动 。

浏览器之间的差异和技术

在浏览器不支持“ start / end “（即歌剧）

浮法技术：交换的方向不会改变任何东西

inline - block的技术：交换的方向不会改变菜单的排列​​，但链接是正确的顺序显示

在浏览器都支持“ start / end “（浏览器，Safari浏览器，火狐）

浮法技术：交换的方向不会改变任何东西

inline - block的技术：交换的方向，就足以交换双方的菜单和链接方向

就是这样！ 下次你要的样式元素水平，记得给display:inline-block或display:table一试。

查找谈话： bloglines | Technorati的

共享和扩展： 书签和书签 | Digg它！ | reddit！