上一个和下一个按钮并排出现，而不是出现在 div 的边缘，请帮我让按钮出现在边缘。
下面是html代码:
<div id ="moreOption_80322271" class="moreOption">
<div id="previousButton" class="prevDisabled">
<a href="javascript:void(0);"> </a>
</div>
<div id="nextButton" class="nextDisabled">
<a href="javascript:void(0);"> </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
}
最佳答案
width: auto; 表示浏览器计算宽度。
由于容器有 absolute 位置，请在容器的 width 上指定一个特定大小，或者使用 left 和 right 它正在运行:
.moreOption {
margin-left: 45px;
position: absolute;
top: 11.4em;
z-index: 1;
width: 100%;
}
关于html - prev 和 Next 按钮并排出现，而不是出现在边缘。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36597619/