本文為大家分享的兩種橫向導航結構的設置方法，主要借助列表結構。

方法一 塊狀結構與行內結構的結合。

這里首先介紹一下塊狀元素與行內結構的區別。

（1）塊狀結構可以設置行高、寬(width、height)，邊距(margin、padding)、邊框(border)等屬性。行內元素只能設置行高，左右邊距，但不具備外邊距，上下內邊距和邊框等屬性。

（2）塊狀結構比較霸道，并不與其他元素分享一行。行內元素則可以嵌套在其他元素中。

常見的塊狀元素有ul,ol,p,form等。常見的行內元素有meta,img,span,h1-h6,label等。

但有時候，為了使塊狀結構具有行內元素的特性，或者使行內元素具有塊狀元素的特性，會對兩者進行結合。舉一個使行內元素具有塊狀元素特性的例子：a標簽是最重要的行內標簽之一，用戶可以根據它指定的鏈接訪問相應頁面。為了使a標簽下的元素表現更加美觀，我們想要給這個鏈接設置一些屬性，包括比如邊框、邊距、背景顏色等等。我們知道這些屬性都是塊狀結構才具有的，所以我們此刻既想繼續使用a這個行內標簽來容納鏈接內容，又希望這個行內元素也能擁有塊狀結構的相關屬性。

我們可以通過”a{display:block}“的設置來解決這一問題。

類似的，當我們想要借助列表，達到設置橫向導航目的時，我們希望列表的每一行能夠在同一行顯示，這時我們也可以通過塊狀結構與行內結構的結合來達到此目的。

我們只需要為list添加一行代碼：list{display:inline;}

方法二 利用float屬性設置。

屬性float可以設置兩個方向浮動，包括left和right。設置橫向導航，就是將列表橫置向左浮動，其中向左浮動是因為我們希望設置浮動后，導航的順序從左到右被橫置，即從左到右依次是導航一到導航四，這更符合更多用戶的習慣。

代碼：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表