雅虎用戶界面博客（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！