CSS的下拉框是網站設計中非常常見的組件，一般用于用戶選擇一項或多項選項。而其中的下拉框橫向排列則是更為美觀和適用于某些場景的選擇。

/* HTML代碼 */
<div class="select-wrapper">
<select name="fruit" id="select-fruit">
<option value="">請選擇水果</option>
<option value="Apple">蘋果</option>
<option value="Orange">橙子</option>
<option value="Banana">香蕉</option>
</select>
</div>
/* CSS樣式 */
.select-wrapper {
position: relative;
width: fit-content;
display: inline-flex;
}
.select-wrapper select {
appearance: none;
-webkit-appearance: none;
background: url(down-arrow.png) no-repeat right center;
padding-right: 20px;
border: 1px solid #ccc;
border-radius: 5px;
height: 30px;
line-height: 30px;
font-size: 14px;
color: #666;
}
.select-wrapper select:focus {
outline: none;
}
.select-wrapper select::-ms-expand {
display: none;
}

在HTML中，我們使用了一個div包裹select標簽，這是為下拉框添加樣式做準備的。接著，在CSS中，給wrapper div添加了inline-flex布局，使得包裹的所有元素橫向排列。然后給select標簽設置外觀為none，將默認的下拉箭頭隱藏，并使用背景圖片的方式添加自定義的下拉箭頭。

值得注意的是，我們還給select標簽設置了一個特殊的屬性appearance，這是針對蘋果設備的，它能禁止系統自帶的下拉箭頭，使我們自己的樣式生效。而對于其他瀏覽器，我們使用了-webkit-appearance屬性，以達到同樣的效果。

最后，我們還通過CSS讓下拉框獲得了一些基本樣式，比如邊框、圓角、字體大小等，讓下拉框更加美觀和易用。至此，我們完成了一個基于CSS的橫向下拉框組件。