CSS導航條的布局方式有很多種，其中一種是靠左對齊。下面是一個簡單的示例：

<ul>
<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;
text-align: left;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #333;
text-decoration: none;
padding: 10px;
}
a:hover {
background-color: #eee;
}
</style>

以上代碼中，ul元素被設置為無序列表，使用了list-style: none來去掉了默認的圓點標記，同時margin和padding也被設置為0。li元素使用了display: inline-block來將每個導航項放在同一行內，并設置了margin的左右間距。a元素則被設置為無下劃線和黑色字體，并給了一個10像素的padding。當鼠標懸停在導航項上時，a元素會有一個淡灰色的背景色。