html - 如何将跨度移动到 DIV 中的不同位置

Question

我的 slider 中有以下代码，它显示导航箭头和元素符号:

<div id="slider1_container" style="width: 1300px; height: 600px; overflow: hidden;">
        <!-- NAVIGATION START -->
        <div u="navigator" class="jssorn21" style="background-color: #00FF00; position: absolute; bottom: 20px; left: 0px;">
            <div u="prototype" style="background-color: #0000FF; POSITION: absolute; WIDTH: 19px; HEIGHT: 19px; text-align: center; line-height: 19px; color: White; font-size: 12px;"></div>
        </div>
        <span u="arrowleft" class="jssord21l" style="width: 35px; height: 35px; left: 40%; bottom: 20px;"></span>
        <span u="arrowright" class="jssord21r" style="width: 35px; height: 35px; right: 38%"></span>
        <!-- NAVIGATION END -->
</div>

显示以下内容:

完整的 CSS 是:

.jssorn21 div, .jssorn21 div:hover, .jssorn21 .av {
    background: url(../theImages/bulletDirection.png) no-repeat;
    overflow:hidden;
    cursor: pointer;
}
.jssorn21 div {
    background-position: -5px -5px;
}
.jssorn21 div:hover, .jssorn21 .av:hover {
    background-position: -35px -5px;
}
.jssorn21 .av {
    background-position: -65px -5px;
}
.jssorn21 .dn, .jssorn21 .dn:hover {
    background-position: -95px -5px;
}

 .jssord21l, .jssord21r, .jssord21ldn, .jssord21rdn {
    position: absolute;
    cursor: pointer;
    /*display: block;*/
    background: url(../theImages/arrowDirection.png) no-repeat;
    overflow: hidden;
    background-color: #000000;
}
.jssord21l {
    background-position: -9px -20px;
}
.jssord21r {
    background-position: -45px -20px;
}
.jssord21l:hover {
    background-position: -81px -20px;
}
.jssord21r:hover {
    background-position: -117px -20px;
}
.jssord21ldn {
    background-position: -153px -20px;
}
.jssord21rdn {
    background-position: -189px -20px;
}

我可以使用 bottom: 20px 代码将导航元素符号移动到底部，但是导航箭头只能移动到left 或 right。 top 或 bottom 对它们不起作用。我想把左边的箭头，子弹的左边和右边的箭头，子弹的右边朝向 slider 的底部。我怎样才能做到这一点？

Answer 1

我会尝试将 position:absolute 添加到 span 中；或者您可以将整个 span 移动到 navigator div 中。

这是选项 1:

<div id="slider1_container" style="width: 1300px; height: 600px; overflow: hidden;">
        <!-- NAVIGATION START -->
        <div u="navigator" class="jssorn21" style="background-color: #00FF00; position: absolute; bottom: 20px; left: 0px;">
            <div u="prototype" style="background-color: #0000FF; POSITION: absolute; WIDTH: 19px; HEIGHT: 19px; text-align: center; line-height: 19px; color: White; font-size: 12px;"></div>
        </div>
        <span u="arrowleft" class="jssord21l" style="width: 35px; height: 35px; left: 40%; bottom: 20px; position:absolute;"></span>
        <span u="arrowright" class="jssord21r" style="width: 35px; height: 35px; right: 38%;position:absolute"></span>
        <!-- NAVIGATION END -->
</div>