多个li标签

Question

是否可以在一行中显示HTML的多个li标签，如下所示。基本上，我们需要在一行中显示前几个li元素，并将其放在列表中，如下所示。谢谢。

Answer 1

请参阅CSS和定位的可能性。您必须通过设置新规则来更改li在布局中的常规比例（默认值）。即：使用浮动CSS属性，但是它们是您在页面中以自己喜欢的方式设置和放置元素的多种方式。 使用引导程序时，您甚至可以使用符合您想要的网格的预定义布局（例如，用一个li填充每个网格单元），但这看起来更加复杂，并且让我写得更多。

Answer 2

是的。

我为您创建了一个示例pen。

HTML

<ul>
  <li>
    <div>
      <span>Item1</span>
      <span>Item2</span>
      <span>Item3</span>
    <div>
  </li>
  <li>item 4</li>
</ul>

CSS

ul{
  list-style-type:none;
  display:flex;
  justify-content:space-between;
  flex-grow:1;
}

ul li{
  display: inline-block;
}

放置图像文件而不是span标签。 确保为它们添加 display:inline-block;属性，并为图像文件提供适当的宽度和高度。

这背后的魔力是flexbox