Html如何設定橫向導航結構-html教學-PHP中文網

Html如何設定橫向導航結構

高洛峰

發布： 2017-02-21 13:36:06

原創

1969 人瀏覽過

本文為大家分享的兩種橫向導航結構的設定方法，主要藉由清單結構。

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

這裡先介紹一下塊狀元素與行內結構的差異。

（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。設定橫向導航，就是將清單橫置向左浮動，其中向左浮動是因為我們希望設定浮動後，導航的順序從左到右被橫置，即從左到右依次是導航一到導航四，這更符合更多用戶的習慣。

程式碼：

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style type="text/css">  
        ul{   
            float:right;   
        }   
        li{   
            padding-right:30px;   
            float:left;   
        }   
        a{   
            margin-left:20px;   
            font-size:20px;   
            font-weight:bold;   
            color:white;   
            display:block;   
            border:1px solid black;   
            width:100px;   
            text-decoration:none;   
            text-align:center;   
            background-color:darkseagreen;   
        }   
        a:hover{   
            color:red;   
        }   
    </style>  
</head>  
<body>  
<ul>  
    <li>导航一</li>  
    <li>导航二</li>  
    <li>导航三</li>  
</ul>  
   
<a href="#">百度</a>  
</body>  
</html>

登入後複製

以上就是本文的全部內容，希望對大家的學習有幫助。

更多Html如何設定橫向導航結構相關文章請關注PHP中文網！