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

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

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>

Answer 2

你必须在你的css代码中添加这样的东西

body, html{
   height: 98%;
   padding: 0;
}

为您的身体提供完整的页面大小，然后给出li身体内部的全尺寸，以便从身体尺寸中获取

显示列表项彼此相邻

2 个答案: