html - 当浏览器调整大小时，CSS 创建的 Logo 背景变得不对齐

Question

我使用 CSS 重新创建了一个 Logo 。这是一个相当简单的标志，一系列带有字母的彩色条。该字母在 h1 标签的范围内(使其变白)。 Logo 是一个 ul，其中 li 项充当框。我使用 z-index 和 position absolute 将它移到字母后面并且在我的屏幕全宽下工作正常但是当浏览器变小时变得不对齐。我试过将 parent 的职位设置为亲戚，但我仍然遇到同样的问题。

我刚刚意识到图像有点不正确。 Logo 背景移出 span/h1 而不是父 div。父 div 具有屏幕的整个宽度。

Example

.logo-bg-box{
  display: inline;
  margin: 0;
  float: left;
  position: absolute;
  left: 10.8%;
  z-index: -1;
}

<div class="logo">
    <ul class="logo-bg-box">
    <li class="logo-bg-box1"></li>
    <li class="logo-bg-box2"></li>
    <li class="logo-bg-box3"></li>
    <li class="logo-bg-box4"></li>
    <li class="logo-bg-box5"></li>
    <li class="logo-bg-box6"></li>
  </ul>
  <h1 class="logo"><span class="logo">M</span>inimal</h1>
</div>

父 div 没有样式。

Answer 1

您是否尝试过添加以下 CSS？

div.logo {
    position: relative;
}