div li 橫排可以實現在網頁布局中將列表元素水平顯示，而不是默認的垂直排列。這種布局在導航菜單、圖片展示等場景中經常被使用。本文將詳細解釋如何使用div和li標簽實現橫排布局，并通過多個代碼案例展示實際應用。

1. 基本橫排布局

最簡單的div li橫排布局，只需將li元素設置為display: inline或者display: inline-block，就可以實現橫向排列的效果。

<div style="background-color: #f1f1f1">
<ul style="list-style-type: none">
<li style="display: inline; margin-right: 10px">Home</li>
<li style="display: inline; margin-right: 10px">About</li>
<li style="display: inline; margin-right: 10px">Services</li>
<li style="display: inline; margin-right: 10px">Contact</li>
</ul>
</div>

上述代碼中，將li的display屬性設置為inline，并添加合適的右邊距，可以讓列表項水平顯示，并且通過設置ul的list-style-type為none，可以去除默認的列表標記符號。

2. 橫排導航菜單

div li橫排常用于導航菜單的布局，下面是一個簡單的導航菜單案例。

<div style="background-color: #f1f1f1">
<ul style="list-style-type: none; padding: 0">
<li style="display: inline-block; margin-right: 10px">
<a href="#">Home</a>
</li>
<li style="display: inline-block; margin-right: 10px">
<a href="#">Products</a>
</li>
<li style="display: inline-block; margin-right: 10px">
<a href="#">Services</a>
</li>
<li style="display: inline-block; margin-right: 10px">
<a href="#">Contact</a>
</li>
</ul>
</div>

上述代碼使用display: inline-block屬性將li元素水平排列，同時添加適當的右邊距和內邊距，以增加可讀性和美觀性。每個li項都包含一個超鏈接，可以通過href屬性指定每個菜單項的鏈接地址。

3. 圖片橫排展示

除了導航菜單以外，div li橫排還可以應用于圖片展示。下面是一個展示書籍封面的案例。

<div style="background-color: #f1f1f1">
<ul style="list-style-type: none; padding: 0">
<li style="display: inline-block; margin-right: 10px">
<img src="book1.jpg" alt="Book 1" width="120">
</li>
<li style="display: inline-block; margin-right: 10px">
<img src="book2.jpg" alt="Book 2" width="120">
</li>
<li style="display: inline-block; margin-right: 10px">
<img src="book3.jpg" alt="Book 3" width="120">
</li>
<li style="display: inline-block; margin-right: 10px">
<img src="book4.jpg" alt="Book 4" width="120">
</li>
</ul>
</div>

上述代碼中，li元素中包含了每本書籍的封面圖片。通過設置display: inline-block屬性，可以將每張圖片水平排列展示。同時，為了增加美觀性，可以設置圖片的寬度，使它們保持統一的尺寸。

：

通過使用div和li標簽，可以方便地實現div li橫排布局。在導航菜單、圖片展示等場景中都可以使用這種布局形式，提升用戶體驗和頁面美觀性。

以上是幾個使用div li橫排的代碼案例，通過改變display屬性和設置適當的外邊距和內邊距，可以實現各種橫排效果。在實際開發中，可以根據具體需求和設計要求來調整代碼和樣式，以達到最佳效果。