<div>是HTML中的一個標簽，用于創建一個容器，可以用來包裹其他元素。<div>標簽常用于布局的設計中，可以根據需要設置不同的寬度。本文主要介紹如何使用<div>標簽實現橫排寬度的效果。
在以下的代碼案例中，我們將使用CSS來控制<div>的寬度和橫排效果。
，我們來看一個簡單的例子。假設我們有三個<div>標簽，我們希望這三個<div>標簽橫排顯示，并且每個<div>標簽的寬度都為200像素。那么我們可以使用CSS的display屬性將<div>標簽設置為行內元素，并將每個<div>的寬度設置為200像素。

<style>
.container {
display: inline-block;
width: 200px;
}
</style>
<div class="container">Div 1</div>
<div class="container">Div 2</div>
<div class="container">Div 3</div>

在上述代碼中，我們定義了一個名為.container的CSS類，將.display屬性設置為inline-block，這樣可以實現橫排效果。然后我們將各個<div>標簽添加了.container類，使其應用這個樣式。通過這樣的設置，我們可以實現三個<div>標簽橫排，并且每個<div>標簽的寬度都為200像素。
接下來，我們來看一個更加復雜的例子。假設我們希望實現一個橫向導航欄，其中每個導航項的寬度自適應，并且平分整個容器的寬度。那么我們可以使用CSS的flexbox布局來實現。

<style>
.container {
display: flex;
}
.nav-item {
flex: 1;
}
</style>
<div class="container">
<div class="nav-item">Home</div>
<div class="nav-item">About</div>
<div class="nav-item">Services</div>
</div>

在上述代碼中，我們定義了一個名為.container的CSS類，將.display屬性設置為flex，這樣可以實現彈性布局。我們給每個導航項添加了一個名為.nav-item的CSS類，并將其.flex屬性設置為1。這樣可以讓每個導航項自動平分整個容器的寬度。
通過上述的兩個代碼案例，我們可以看到<div>標簽通過CSS的設置可以實現不同的橫排寬度效果。這樣的設計可以幫助我們更好地布局和設計網頁，實現更加靈活和美觀的界面。