css怎麼設定橫向導航

導覽列

熟練使用導覽欄，對於任何網站都非常重要。

使用CSS你可以轉換成好看的導覽列而不是枯燥的HTML選單。

導覽列=連結清單

作為標準的HTML基礎一個導覽列是必須的。

導航條基本上是一個連結列表，所以使用

和
• 元素非常有意義：

  <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{
      float:left;
  }
  a{
      display:block;
      width:60px;
  }

  float:left - 使用浮動區塊元素的幻燈片彼此相鄰

  display:block - 顯示區塊元素的鏈接，讓整體變為可點擊連結區域（不只是文字），它允許我們指定寬度

  width:60px - 區塊元素預設為最大寬度。我們要指定一個60像素的寬度

  以上是css怎麼設定橫向導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！