CSS導航欄的橫向布局是網頁設計中常見的一種布局方式。可以通過CSS樣式來實現簡單的橫向導航欄，也可以使用JavaScript或jQuery等工具來實現更復雜的導航欄。

以下是一個簡單的橫向導航欄的代碼，其中使用了

和
• 來構建導航欄的列表，使用CSS樣式來設置導航欄的樣式和布局：

  <ul>
  <li><a href="#">首頁</a></li>
  <li><a href="#">新聞</a></li>
  <li><a href="#">產品</a></li>
  <li><a href="#">關于我們</a></li>
  <li><a href="#">聯系方式</a></li>
  </ul>
  <style>
  ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  }
  li {
  margin: 0 10px;
  text-align: center;
  }
  a {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  border-radius: 5px;
  background-color: #eee;
  }
  </style>

  上述代碼中使用了flex布局，讓導航欄的每個選項處于同一行，并且可以根據瀏覽器的大小自動調整布局。同時，為每個選項設置了一些CSS樣式，使得導航欄在視覺效果上更加美觀。例如，使用了border-radius屬性來設置導航欄選項的圓角，使用background-color屬性來設置選項的背景色。

  如果想要實現更加復雜的導航欄，可以使用JavaScript或jQuery等庫來實現。這些庫提供了更加強大的功能，例如下拉菜單、動畫效果等等，可以讓導航欄看起來更加逼真和流暢。