Question

上一个和下一个按钮彼此相邻，而不是出现在div的边缘，请帮我把按钮显示在边缘。

以下是html代码：

    <div id ="moreOption_80322271" class="moreOption">
    <div id="previousButton" class="prevDisabled">
    <a href="javascript:void(0);">&nbsp;</a>
    </div>

    <div id="nextButton" class="nextDisabled">
    <a href="javascript:void(0);">&nbsp;</a>
    </div>
    </div>

以下是prev和next按钮的CSS样式

.moreOption {
    margin-left: 45px;
    position: absolute;
    top: 11.4em;
    width: auto;
    z-index: 1
}
.moreOption .prev {
    margin-right: 7px;
    position: relative
}
.moreOption .next {
    margin-left: 10px;
    position: relative
}
.moreOption .prev a {
    background: url('/ms/img/more_options/inactive_left.png') no-repeat;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
    z-index: 10
}
.moreOption .next a {
    background: url('/ms/img/more_options/inactive_right.png') no-repeat;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    z-index: 10
}
#popupContent .moreOption {
    top: 11.7em;
    z-index: 999
}
#popupContent .moreOption .prev a {
    background: url('/ms/img/more_options/hover_left.png') no-repeat
}
#popupContent .moreOption .next a {
    background: url('/ms/img/more_options/hover_right.png') no-repeat
}
#popupContent .moreOption .prev a:hover {
    background: url('/ms/img/more_options/mouseover_left.png') no-repeat
}
#popupContent .moreOption .next a:hover {
    background: url('/ms/img/more_options/mouseover_right.png') no-repeat
}
.productContainerCategory .moreOption {
    top: 10.5em
}
.moreOption .prevDisabled {
    margin-right: 7px;
    position: relative
}
.moreOption .nextDisabled {
    margin-left: 10px;
    position: relative
}
.moreOption .prevDisabled a {
    background: url('/ms/img/more_options/inactive_left.png') no-repeat;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
    z-index: 10
}
.moreOption .nextDisabled a {
    background: url('/ms/img/more_options/inactive_right.png') no-repeat;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    z-index: 10
}
#popupContent .moreOption .prevDisabled a {
    background: url('/ms/img/more_options/inactive_left.png') no-repeat
}
#popupContent .moreOption .nextDisabled a {
    background: url('/ms/img/more_opt[enter image description here][1]ions/inactive_right.png') no-repeat
}

Answer 1

width: auto;表示浏览器计算宽度。

由于容器位于absolute位置，因此请在容器的width上指定特定尺寸，或使用left和right进行操作，并且它正在运行：

.moreOption {
    margin-left: 45px;
    position: absolute;
    top: 11.4em;
    z-index: 1;
    width: 100%;
}

See it here

prev和Next按钮彼此相邻，而不是出现在边缘。

1 个答案: