时间戳

首页 > 解决方案 > 当我的文本变长时相邻父容器的随机移动：HTML/CSS

html - 当我的文本变长时相邻父容器的随机移动：HTML/CSS

问题描述

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

.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 class="bclr1">
    <p>Dark Gray</p>
  </li>
  <li class="bclr2">
    <p>Medium Gray</p>
  </li>
  <li class="bclr3">
    <p>White</p>
  </li>
</ul>

当文本只有一行时，这很好用。但是当我将颜色的 rgb 值放入文本中时，每个元素中的文本都会变得足够长，以至于它会创建第二行文本。并且由于某种原因，当这种情况发生时，它会将下一个 li 元素向下推。这是两个州的照片。

一行文字

两行文字

这可能是我没有意识到的显而易见的事情。IDK 如果我制作色块或使文本居中并位于它们上方的方式是最实用/有用/灵活的方法。我只是好奇这里是否有人知道为什么会发生这种情况。谢谢！

标签： htmlcsspositionparent-childdisplay

解决方案

默认情况下，这些块具有vertical-align:baseline，这使它们与文本的底部对齐。只有当文本具有相同的行数时，它才能正常工作。
解决方案：添加vertical-align:top以将它们与顶部对齐。

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

.backgroundclr li {
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;         /* new */
  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 class="bclr1">
    <p>Dark Gray</p>
  </li>
  <li class="bclr2">
    <p>Medium Gray</p>
  </li>
  <li class="bclr3">
    <p>White</p>
  </li>
</ul>

推荐阅读