在網頁中，我們經常需要將一些代碼或者列表橫向顯示出來，以方便用戶閱讀。在這種情況下，我們可以使用 CSS 來實現。下面我們將介紹如何使用 CSS 來橫向顯示列表和代碼。 1. 列表橫向排列 要將列表橫向排列，我們可以使用 CSS 的 display 屬性。將列表項設置為 inline 或者 inline-block 可以讓其水平排列。 例如，下面的 HTML 代碼中有一個無序列表： ```

• Apple
• Orange
• Banana

``` 我們可以使用下面的 CSS 代碼將其橫向排列： ``` ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; margin: 0 10px; } ``` 其中，list-style: none 可以去掉列表項的默認樣式，margin 和 padding 屬性用來清除列表的內外邊距，display: inline-block 用來將列表項橫向排列。margin: 0 10px 則是設置每個列表項之間的距離為 10px。 2. 代碼橫向顯示 與列表類似，橫向顯示代碼也可以使用 CSS 的 display 屬性。但是，為了保持代碼的格式和排版，我們還需要使用 pre 標簽和 white-space 屬性。 例如，下面的 HTML 代碼中有一段代碼： ```

function sum(a, b) {
return a + b;
}

``` 我們可以使用下面的 CSS 代碼將其橫向排列： ``` pre { display: inline-block; background-color: #f8f8f8; padding: 10px; border: 1px solid #ccc; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; } ``` 其中，display: inline-block 和 padding 屬性用來讓代碼塊橫向排列，并增加一些內邊距以增加可讀性。background-color 和 border 屬性用來美化代碼塊的外觀。white-space: pre-wrap 則是設置代碼塊保留空白和換行符，word-wrap: break-word 則是讓較長的行自動換行，以保持代碼塊的格式和排版。最后，注意在 pre 標簽中使用 code 標簽可以進一步美化代碼的顯示效果。 總之，通過使用 CSS 的 display 屬性和一些其他屬性，我們可以很容易地將列表和代碼橫向排列，并提高網頁的可讀性和美觀性。