html - 无序列表元素在同一行

Question

我有如下无序列表

 <div>
  <ul>
    <li id="e1">element one</li>
    <li id="e2">element two</li>
  </ul>
 </div>

我希望 e1 和 e2 出现在同一行中。而且我不想使用 display:inline-block 或 inline

这可能吗？如何实现？

Answer 1

除了一些棘手的定位之外，您的主要替代方法是使用 float (和 float 清除)

ul {
  overflow: hidden;
}

ul li {
  float: left;
}

它有自己烦人的问题，但确实存在。

没有必要设置宽度，除非你在这些列表上使用了 display: block。你可能有，因为你说你不想内联它们(默认情况下它们是内联的)。

当然还有许多其他列表样式需要考虑，例如边距、填充和列表样式*。