css - 显示彼此相邻的列表项

Question

出于某种原因我无法显示 <li>紧挨着:

ul {
  padding: 0;
  margin: 0;
}
li {
  display: inline-block;
  width: 100%;
  height: 100%
}
.bg1 {
  background-color: red;
}
.bg2 {
  background-color: #000;
}

<ul>
  <li class="bg1">item 1</li>
  <li class="bg2">item 2</li>
</ul>

该代码应该生成一个红色页面(因为第一个 <li> 有红色背景)我想用 Javascript 创建一个旋转木马，但在到达那个点之前我需要解决这个问题。谢谢。

Answer 1

主要问题是 li 规则中的 width: 100%:它强制 li 元素为其整个宽度容器(ul/body)。将其设置为固定宽度、较小的百分比或将其保留并仅使用类似于我下面的示例的填充。

ul {
  padding: 0;
  margin: 0;
}
li {
  display: inline-block;
  padding: 10px 30px;
}
.bg1 {
  background-color: red;
}
.bg2 {
  background-color: #000;
  color: #fff;
}

<ul>
  <li class="bg1">item 1</li>
  <li class="bg2">item 2</li>
</ul>