Question

我正在尝试使用左右箭头构建旋转木马。如何将右箭头与屏幕的右侧对齐？我看了很多帖子来弄明白，试过浮动和对齐，无法搞清楚。

这是我的JSFiddle：http://jsfiddle.net/agassi0430/CcAMD/

提前感谢您的帮助。

Answer 1

最简单的方法是在箭头上使用position: absolute;并使用right: 0; left: 0;对齐它们。您还必须记住将position: relative;设置为包含它们的元素，以便绝对位置在该容器内工作。

Here's the fiddle

另外，请注意你的html标记。在<li><li>（无序列表）之间放置<ul></ul>（列表项）以外的任何内容无效

Answer 2

请试试这个：

    <div class="category">Most Discussed</div>
    <div class="contents">    
        <ul><div class="leftarrow"></div></ul>
        <ul><div class="content"></div>
            <li></li>
            <li></li>
            <li></li>
            <li></li></ul>
        <ul style="float:right;"><div class="rightarrow"></div></ul>
    </div>

Answer 3

我认为如果您可以从列表中删除箭头会有所帮助......但如果您需要将它们保留在列表中，请尝试使用显示属性。如display：inline-block;在你的CSS。但要小心，其中一些在旧版本的IE中不会很好地降级。对于IE 7，你可能需要一个小的css hack ...

对齐右侧的箭头

3 个答案: