如何将跨度移动到 DIV 中的不同位置答案

【问题标题】：How to move a span to a different position in a DIV如何将跨度移动到 DIV 中的不同位置
【发布时间】：2014-03-12 23:42:25
【问题描述】：

我的滑块中有以下代码，显示导航箭头和项目符号：

<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 对他们不起作用。我想把左边的箭头，左边的子弹和右边的箭头，右边的子弹放在滑块的底部。我怎样才能做到这一点？

【问题讨论】：

如果您将<span> 移动到navigator div 内会怎样？
实际上 Slider JQuery 中有一个代码覆盖了 CSS。我评论了它，现在一切正常，即使在<div 之外：)

标签： html css hover

【解决方案1】：

我会尝试将position:absolute 添加到跨度；或者您可以将整个spans 移动到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>

【讨论】：