溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關怎么在css中設置橫向導航，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
導航欄
熟練使用導航欄，對于任何網站都非常重要。
使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML菜單。
導航欄=鏈接列表
作為標準的HTML基礎一個導航欄是必須的。
導航條基本上是一個鏈接列表，所以使用 <ul> 和 <li>元素非常有意義：
<ul> <li><a href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <li><a href="#contact">聯系</a></li> <li><a href="#about">關于</a></li> </ul>
有兩種方法創建橫向導航欄。使用內聯(inline)或浮動(float)的列表項。
這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法。
內聯列表項
建立一個橫向導航欄的方法之一是指定元素，
實例
li{
display:inline;
}display:inline; -默認情況下，<li>元素是塊元素。在這里，我們刪除換行符之前和之后每個列表項，以顯示一行。
浮動列表項
在上面的例子中鏈接有不同的寬度。
對于所有的鏈接寬度相等，浮動 <li>元素，并指定為 <a>元素的寬度：
實例
li{
float:left;
}
a{
display:block;
width:60px;
}float:left - 使用浮動塊元素的幻燈片彼此相鄰
display:block - 顯示塊元素的鏈接，讓整體變為可點擊鏈接區域（不只是文本），它允許我們指定寬度
width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度
以上就是怎么在css中設置橫向導航，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
