0

我使用 css 重新创建了一个徽标。这是一个相当简单的标志，一系列带有字母的彩色条。该字母在 h1 标签的范围内（使其变为白色）。徽标是一个 ul，其中 li 项目充当盒子。我使用 z-index 和绝对位置将其移动到字母后面，并且在我的屏幕全宽下工作正常，但当浏览器变小时变得不对齐。我尝试将父母的位置设置为相对，但我仍然遇到同样的问题。

我刚刚意识到图像有点不正确。徽标背景移动到 span/h1 之外，而不是父 div。父 div 具有整个屏幕的宽度。

例子

.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 没有样式。

4

2 回答 2

1

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

div.logo {
    position: relative;
}
于 2013-05-07T11:02:11.183 回答
1

当您使用百分比作为测量工具时，样式会说“使此内容具有左侧总窗口大小的 10.8%”，因此如果窗口宽度为 1000px，则左侧位置将为 1000px 的 10.8%，因此，只要窗口大小发生变化，就会发生变化。使用像素px而不是百分比%，它会工作得很好

于 2013-05-07T11:05:23.537 回答