html - 在其 css 中具有过渡的元素的意外行为

Question

我为某些元素编写了一些 css，但它导致了一些意外行为。我正在使用:

transition: 0.2s;

当刷新页面时，具有此 css 属性的元素意外地从页面的另一个区域开始，并移动到它们的设置位置(设置在我的 css 的其他部分)。的，

position: absolute

属性用于定位元素，是什么导致了这种意外行为？

这是链接的 CSS:

.subLinks_links {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: left;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    font-size: 13px;
    color: #999;
    margin-bottom: -1px;
    cursor: pointer;
    text-transform: uppercase;
}

.subLinks_links > span {
    margin-left: 30px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;

.subLinks_links:hover > span {
    margin-left: 40px;
}

以及 css 的相关 HTML:

<div id="subLinks">

    <div class="subLinks_links_selected"><span>Link Text</span></div>

    <div class="subLinks_links"><span>Link Text</span></div>

</div>

Answer 1

我发现这是一个定位问题。我使用 text-align 和 margin-left 来定位元素。没有导致不良行为的死定位。