CSS作為網頁設計語言中不可或缺的一部分，經常應用于網頁頁面布局中。今天我們來探討一下如何使用CSS讓li元素拍成一排，方便我們進行網頁布局的設計與調整。

/* HTML 代碼 */
<ul class="list">
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
<li>列表項4</li>
<li>列表項5</li>
</ul>
/* CSS 代碼 */
.list {
list-style: none; /* 去除原有的列表樣式 */
margin: 0;
padding: 0;
}
.list li {
display: inline-block; /* 設置為行內元素 */
padding: 10px;
background-color: #ccc;
border: 1px solid #999;
}

上述代碼中，我們首先創建了一個無序列表，并為其添加了樣式名`.list`。接下來，我們設置了`.list`的樣式，去除了原有的列表樣式，并將內外邊距都設為0。然后，我們為`.list li`添加了樣式，將其顯示為行內元素，并設置了內外邊距、背景色以及邊框等屬性，在網頁中呈現出一排有序的列表，方便了頁面布局設計。

在實際應用中，我們可以進一步的調整`.list li`的樣式，以及添加其它屬性，來達到我們想要的網頁布局效果。