Question

当我尝试在链接上使用CSS中的顶部字时，它不起作用。我希望我的链接在页面上较低，所以我会使用 top：10％; 。这不起作用，因为我的链接似乎无论如何都不会移动。然而，我可以通过 text-align：center; 来让它们向侧面移动。

我的HTML

<div id="pythonfilelistfiles">
    <a href="http://localhost/project1/pythonfiles-calcuator.html">
        <div class="pythonfilelistboxs" id="file1">
            <h1> Simple Calculator </h1>
        </div>
    </a>

我的CSS

#pythonfilelistfiles {
    width: 78%;
    height: 92%;
    margin-left: 20%;
    margin-top: -2%;
    max-width: 78%;
    max-height: 92%;
    overflow-y: scroll;
}

#file1 {
    top: 0%;
}

.pythonfilelistboxs {
    width: 96%;
    height: 12%;
    background-color: black;
    margin-left: 2%;
    z-index: 5;
    position: relative;
    border-radius: 8px;
    border: 2px solid red;
    color: red;
    text-align: center;
    line-height: 80%;
}

Answer 1

您可以通过多种方式实现此目标，其中大多数可能比使用定位属性更易于维护 -

将填充添加到包含div的顶部。
增加这些链接的line-height。
使用margin-top将其向下移动相对数量（您还需要将其设置为display: block，这将改变它们在页面流中的行为方式）。

在任何情况下使用百分比以外的单位可能更容易 - 最好使用与em或rem类型相关的单位。

CSS顶部不适用于链接

1 个答案: