li 如何实现在同一行

要使<li>元素在同一行显示，你可以使用CSS来改变它们的默认布局行为。<li>元素作为列表项，默认情况下是块级元素，这意味着它们会各自独占一行。要让它们在同一行显示，你可以采取以下几种方法：

1. 使用Flexbox:
   在包含<li>元素的<ul>或<ol>容器上设置display: flex;。

   ul {
     display: flex;
   }
   

2. 使用Grid布局:
   同样在父容器上设置display: grid;，并根据需要定义网格列。

   ul {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 举例，每个列至少100px宽 */
   }
   

3. 转换为行内块元素:
   将<li>设为行内块元素(display: inline-block;)。但需要注意处理空白间隙问题，可通过设置父容器的字体大小为0，然后再在<li>上重置字体大小来解决。

   ul {
     font-size: 0;
   }
   li {
     display: inline-block;
     font-size: 1rem;
   }
   

4. 使用float:
   虽然不推荐在现代布局中频繁使用，但你也可以通过给<li>设置float: left;或float: right;来实现。不过，记得清除浮动，以防布局错乱。

   li {
     float: left;
   }
   /* 或者在最后一个li之后添加一个清除元素 */
   li:last-child {
     clear: left;
   }
   

以上方法中，Flexbox和Grid布局是更现代且灵活的选择，尤其是在需要复杂布局调整的情况下。选择哪种方法取决于你的具体需求和浏览器兼容性考虑。