右对齐箭头答案

【问题标题】：Aligning arrow on the right右对齐箭头
【发布时间】：2012-09-20 22:34:44
【问题描述】：

我正在尝试用左右箭头构建一个旋转木马。如何将右箭头对齐到屏幕的最右侧？我查看了许多帖子以弄清楚，尝试了浮动和对齐，无法弄清楚。

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

提前感谢您的帮助。

【问题讨论】：

【解决方案1】：

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

Here's the fiddle.

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

【讨论】：

谢谢瑞克。没有意识到你不能在 ul 中设置 div

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：