How to move a span to a different position in a DIV

问题

I have the following codes in my slider which displays a navigational arrow and bullets:

<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>

Displays the following:

The full CSS is:

.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;
}

The navigation bullets I was able to move to the bottom with the bottom: 20px code but the navigation arrows can only be moved left or right. The top or bottom does not work for them. I want to put the left arrow, left of the bullets and the right arrow, right of the bullets toward the bottom of the slider. How can I achieve that?

回答1:

I would try to add position:absolute to the spans; Or you can move the whole spans inside the navigator div.

This is option 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>

来源：https://stackoverflow.com/questions/22356353/how-to-move-a-span-to-a-different-position-in-a-div

标签

html

css

hover