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

【问题标题】：prev and Next buttons are appearing next to each other instead of appearing at the edge.prev 和 Next 按钮彼此相邻出现，而不是出现在边缘。
【发布时间】：2016-08-04 12:04:25
【问题描述】：

上一个和下一个按钮彼此相邻出现，而不是出现在 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>

这是上一个和下一个按钮的 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
}

【问题讨论】：

您的代码不正确...

标签： html css

【解决方案1】：

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

由于容器具有absolute 位置，请在容器上的width 上指定特定大小或使用left 和right，它正在工作：

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

See it here

【讨论】：

感谢@E.Agolli 的小 CSS 更正；）我也编辑了我的小提琴 :)
NP man @Vincent G。即使滑块没有图像但它有图像箭头会自动在边缘移动，这是一个让箭头保持在边缘的修复。
对，因为width:auto;是用容器的内部内容计算的:)
@Vincent G，感谢您的帮助！我已经改变了你提到的左右属性并且它现在可以工作了。