CSS是網頁開發中很重要的一部分，它可以幫助我們更好地設置和美化網頁。今天我們來看一下如何設置一個搜索導航條。

首先，我們需要寫HTML代碼來創建搜索導航條。在一個form標簽內添加一個input和一個button即可：

<form><input type="text" placeholder="搜索..."><button type="submit">搜索</button></form>

現在來添加CSS樣式。我們先給form元素一個class名字，然后使用display: flex;來讓它變成一個彈性盒子：

<style>.search-bar {
display: flex;
}
</style>

好的，現在我們來添加搜索框的樣式。使用flex-grow: 1;將它拉伸，再使用border-radius: 25px;給它圓角。還需要使用padding屬性給里面的文字留出一些間距：

<style>.search-bar {
display: flex;
}
.search-bar input {
flex-grow: 1;
border-radius: 25px;
padding: 5px 10px;
}
</style>

最后，我們來設置搜索按鈕的樣式。使用background-color設置背景顏色，color設置文字顏色，border-radius給它圓角：

<style>.search-bar {
display: flex;
}
.search-bar input {
flex-grow: 1;
border-radius: 25px;
padding: 5px 10px;
}
.search-bar button {
background-color: #007bff;
color: #fff;
border-radius: 25px;
padding: 5px 15px;
margin-left: 10px;
}
</style>

現在我們的搜索導航條就完成了。完整代碼如下：

<style>.search-bar {
display: flex;
}
.search-bar input {
flex-grow: 1;
border-radius: 25px;
padding: 5px 10px;
}
.search-bar button {
background-color: #007bff;
color: #fff;
border-radius: 25px;
padding: 5px 15px;
margin-left: 10px;
}
</style><form class="search-bar"><input type="text" placeholder="搜索..."><button type="submit">搜索</button></form>

希望這篇文章能幫助你更好地了解如何使用CSS設置搜索導航條。