Question

我目前正在开发一个旧网站，该网站是用一些旧的糟糕的WYSIWYG编辑器创建的。我是web-dev的新手，仍然试图正确地定位元素。我目前的问题是，从我所看到的，使用绝对定位是不好的，但你会如何改变它呢？

所以这是旧代码：

 <div id="wb_Text1" 
    style="margin:0;
    padding:0;
    position:absolute;
    left:187px;
    top:24px;
    width:83px;
    height:147px;
    text-align:left;
    z-index:1;
    border:0px #C0C0C0 solid;
    overflow-y:hidden;
    background-color:transparent;
">
<div style="font-family:'.Helvetica Neue DeskInterface';font-size:15px;color:#000000;">
  <div style="text-align:left">
    <span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
        <strong>W</strong>
    </span>
  </div>
  <div style="text-align:left">
    <span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
        <strong>A</strong>
    </span>
  </div>
  <div style="text-align:left">
    <span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
        <strong>C</strong>
    </span>
  </div>
</div>

我想出来取代它是：

HTML

<div class="logo-ul">
  <ul>
    <li>W</li>
    <li>A</li>
    <li>C</li>
  </ul>
</div>

CSS

.logo-ul {
list-style-type: none;
color: white;
font-size: 2em;
z-index:24;
float: right;
margin-right: 80%;
}

看起来很好，直到你折叠窗口并且它崩溃:(大声笑。

你可以看到我在这里做的事情http://media.wacmotorcycles.co.uk/

我该怎么写这个？

感谢。

Answer 1

尝试将#logo更改为

#logo {
    max-width: 165px;
    max-height: 171px;
    margin: 0.75em 0;
    float: left;
}

并且，.logo-ul到

.logo-ul {
    list-style-type: none;
    color: white;
    font-size: 2em;
    z-index: 24;
    float: left;
}

Answer 2

绝对定位没有任何内在错误。如果使用不当，使用响应式布局时可能会出现意外结果。

在您的具体情况下， W A C 可能更好地作为徽标图片本身的一部分而不是文本实现。它不提供任何语义或搜索引擎优化的好处，以包括列表中的字母。除此之外，这是实现我认为你所追求的一种方式：

.logo {
  height: 6rem;
  padding-left: 50px;
}

.logo-letter {
  display: block;
  height: 2rem;
}

<div class="logo">
  <span class="logo-letter">W</span>
  <span class="logo-letter">A</span>
  <span class="logo-letter">C</span>
</div>

如何不使用绝对定位CSS

2 个答案: