<ul class="menu">
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">關于我們</a></li>
</ul>

元素的display屬性設置為inline或inline-block，并將其float屬性設置為left。示例代碼如下：

.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
}
.menu a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: #333;
background-color: #f5f5f5;
border-radius: 5px;
border: 1px solid #ddd;
margin-right: 10px;
}
.menu a:hover {
background-color: #ddd;
}

在上面的代碼中，我們設置了
元素的樣式，并使用float:left將其浮動到頁面左側。我們還為每個
• 元素設置了浮動樣式，以便它們可以橫向排列顯示。最后，我們使用元素來創建每個導航項，并設置了一些基本樣式，如文本樣式、背景顏色、邊框和內邊距等。 以上就是使用CSS浮動制作簡單導航條的基本方法。需要注意的是，浮動元素可能會影響其他元素的布局，因此在設計頁面布局時需要謹慎使用。同時，還需要考慮不同設備和屏幕尺寸的顯示效果，以便確保導航條的可用性和易用性。