方法/步驟

1/8分步閱讀

首先我們先開啟自己的DreamWeaver軟體，新建一個html5頁面，然後命名，儲存。

2/8

然後我們先進行簡單的頁面佈局。在body部分加入一個div，裡面新增ul和li的巢狀。

3/8

我們在li標籤中新增部分內容，並設定其寬度為100%，即充滿整個螢幕，高度為固定值。

4/8

然後我們找到已經做好的圖片，注意圖片儘量選擇正方形的，大小為30×30px.

5/8

若想讓圖片和文字在同一行，不管頁面怎樣變化二者都要處在同一行，就需要我們將圖片作為li標籤的背景圖片。

6/8

這樣文字會將圖片覆蓋，我們還需要為li標籤設定一個左側的內邊距，以保證文字在圖片的左邊。(由於圖片的大小已經是固定值了，左邊距的大小我們也可以將其設為固定的)

7/8

再在li標籤下面新增一條橫線，並將背景圖片進行定位，這樣我們可以看到很好的效果。證實文字和圖片是在同一水平線上的。

8/8

想讓文字和圖片在同一水平線上，總結起來就是將圖片設為背景圖片，並新增padding-left，然後定位一下圖片的位置。