在網(wǎng)頁設計中，常常需要實現(xiàn)一個帶有圖文結合的效果。左邊是圖片，右邊是文字。這時候就需要用到CSS中的li屬性。

li屬性可以實現(xiàn)列表的樣式布局。在這里我們可以將圖片和文字用li來分別設置樣式。左邊的圖片可以設為float: left，右邊的文字可以設為float: right。

li {
list-style: none;  /* 去除原有的列表樣式 */
overflow: hidden;  /* 清除浮動 */
margin-bottom: 20px;  /* 設置間距 */
}
li img {
float: left;  /* 圖片左浮動 */
margin-right: 10px;  /* 圖片和文字之間的距離 */
}
li p {
float: right;  /* 文字右浮動 */
width: 70%;  /* 文字所占的寬度 */
margin: 0;  /* 去掉文字的默認邊距 */
}

當然，如果你想讓圖片和文字上下排列，也可以將li設為display: flex，這樣就可以方便的控制圖片和文字的位置。

li {
list-style: none;  /* 去除原有的列表樣式 */
display: flex;  /* 彈性布局 */
align-items: center;  /* 縱向居中對齊 */
margin-bottom: 20px;  /* 設置間距 */
}
li img {
margin-right: 10px;  /* 圖片和文字之間的距離 */
}
li p {
margin: 0;  /* 去掉文字的默認邊距 */
}

通過li屬性，我們可以很方便的實現(xiàn)左圖右文的效果，提升網(wǎng)頁的美觀度和實用性。