Question

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

我刚刚意识到图像有点不正确。徽标背景移动到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;
}

Answer 2

当您使用百分比作为测量工具时，样式会说“使此内容具有左侧总窗口大小的10.8％”，因此如果窗口宽度为1000px，则左侧位置为10.8％ 1000px，因此只要窗口大小改变就会改变。使用像素px代替百分比%，它可以正常工作

浏览器调整大小时，CSS创建的徽标背景变为未对齐

2 个答案: