在CSS中，我們可以使用display: inline-block;或者float: left;將li元素橫向顯示出來。

使用display: inline-block;

我們可以通過設置display: inline-block;樣式，使li元素像行內(nèi)元素一樣顯示，但又可以像塊級元素一樣設置寬度和高度。

<ul>
  <li style="display: inline-block;">Item 1</li>
  <li style="display: inline-block;">Item 2</li>
  <li style="display: inline-block;">Item 3</li>
</ul>

使用float: left;

我們也可以通過設置float: left;樣式，使li元素浮動到左側(cè)，從而實現(xiàn)橫向顯示。

<ul>
  <li style="float: left;">Item 1</li>
  <li style="float: left;">Item 2</li>
  <li style="float: left;">Item 3</li>
</ul>

清除浮動

需要注意的是，使用float: left;后，可能會影響到其他元素的布局，通常需要添加一些CSS代碼來清除浮動，

.clear-float {
  clear: both;
}

并在需要的地方添加這個類：

<ul>
  <li style="float: left;">Item 1</li>
  <li style="float: left;">Item 2</li>
  <li style="float: left;">Item 3</li>
</ul>
<div class="clear-float"></div>

使用Flexbox或Grid布局

除了上述方法，還可以使用Flexbox或Grid布局來實現(xiàn)li元素的橫向顯示，這些布局方式提供了更強大和靈活的布局控制。

使用Flexbox布局：

<ul style="display: flex;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

使用Grid布局：

<ul style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

這些方法都可以實現(xiàn)li元素的橫向顯示，具體使用哪種方式取決于你的需求和布局需求。