我对编码/网页设计很陌生，所以也许这有一个明显的答案。但我只是在用东西练习。在一个非常基本的网页上，我有一个三种颜色的列表。我在上面写上了颜色的名称。我创建颜色块的方法是将它们放在一个无序列表中，然后将它们设置为display：inline-block，这样它们就可以并排显示。文本是包含块的子[p]元素，我将其居中，然后设置为position：relative.然后我把它们向上移动，这样它们就会在色块的上方。这是我使用

.backgroundclr {
  list-style: none;
  margin-top: 70px;
}

.backgroundclr li {
  border: 1px solid black;
  display: inline-block;
  padding: 50px;
  height: 100px;
  width: 200px;
  text-align: center;
}

.bclr1 {
  background-color: rgb(48, 56, 65);
}

.bclr2 {
  background-color: rgb(114, 120, 126);
}

.backgroundclr li p {
  position: relative;
  bottom: 95px;
  font-size: 20px;
}

<代码><；UL CLASS=“ BackgroundCLR ”>；<；Li类=“ BCLR1 ”>；<；P>；深灰色<；/p>；<；/Li>；<；Li类=“ BCLR2 ”>；<；P>；中灰<；/P>；<；/Li>；<；Li类=“ BCLr3 ”>；<；P>；白色<；/p>；<；/Li>；<；/UL>；

，这很好。但是当我把颜色的RGB值放在文本中时，每个元素中的文本变得足够长，它创建了第二行文本。出于某种原因，当这种情况发生时，它会将下一个Li元素向下推。这是两个州的照片。

一行文字

两行文字

这可能是我没有意识到的显而易见的事情。我不知道我制作色块或将文字居中并置于其上的方法是否是最实用/有用/灵活的方法。我只是好奇这里有没有人知道为什么会这样。谢谢！

顺晟科技：

块具有<ul class="backgroundclr"> <li class="bclr1"> <p>Dark Gray</p> </li> <li class="bclr2"> <p>Medium Gray</p> </li> <li class="bclr3"> <p>White</p> </li> </ul>，这会使它们与文本的底部对齐。只有当文本具有相同的行数时，才能正确工作。解决方案：添加vertical-align:baseline以将它们与顶部对齐。

vertical-align:top

<代码><；UL CLASS=“ BackgroundCLR ”>；<；Li类=“ BCLR1 ”>；<；P>；深灰色<；/p>；<；/Li>；<；Li类=“ BCLR2 ”>；<；P>；中灰<；/P>；<；/Li>；<；Li类=“ BCLr3 ”>；<；P>；白色<；/p>；<；/Li>；<；/UL>；