css - DIV 未正确排列的问题

Question

我正在非常努力地进行这项工作，但我看不出哪里出了问题。我有以下代码:

<div id="ftr_btm">
        <div id="ftr_ctr">
            <div id="ftr_msg">
                <ul>
                    <li><a href="/">123</a></li>
                    <li><a href="/"></a></li>
                </ul>
            </div>
        </div>
        <div id="ftr_rgt">
            <div id="ftr_msg">
                <ul>
                    <li><a href="/">ABC</a></li>
                    <li><a href="/"></a></li>
                </ul>
            </div>
        </div>
    </div>

和以下 CSS:

#ftr_btm { height:24px; margin:0 auto; border-top: 1px solid #AAA;
    background: #F6F6F6;
    background: -moz-linear-gradient(top, #F6F6F6 0%, #F6F6F6 5%, #F0F0F0 6%, #F0F0F0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F6F6F6), color-stop(5%,#F6F6F6), color-stop(6%,#F0F0F0), color-stop(100%,#F0F0F0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F6F6F6', endColorstr='#F0F0F0',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* W3C */ }
#ftr_btm p { line-height:20px; text-align:center; margin:0px; padding:0px; color:#666; }

/* Footer Message */
#ftr_ctr {text-align: center; font-size:0.8em; }
#ftr_rgt {text-align: right; font-size:0.8em; top: 0px; position: relative;}
#ftr_msg { color:#666;  display: inline-block; padding-top: 2px; height:24px; background: transparent;}
#ftr_msg ul { margin: 0; }
#ftr_msg ul li { float: left; overflow: inherit;position:relative; white-space: nobox; display:inline; line-height: 20px; }
#ftr_msg ul li a { color:#666; display:inline; padding: 0 10px; white-space: nobox; text-decoration: none; }
#ftr_msg ul li a:hover { color:#3985d4;} 

问题是 123 和 ABC 都应该出现在页脚中。当我用这个 fiddle 运行它时然后你可以看到 ABC 在页脚下方。任何人都可以看到我做错了什么。我检查了很多次，仍然看不出有什么问题。

Answer 1

根据目前的情况猜测您的意图..

• 在#ftr_rgt上，您需要将position设置为absolute，而不是relative。
• 在 #ftr_rgt 的父级(即 #ftr_btm 上，您需要设置 position: relative。
• 最后，您需要将right: 0 添加到#ftr_rgt。您已经有了 top: 0。

参见: http://jsfiddle.net/a4Gar/1/

如果您尝试使用relative/absolute 定位，您需要了解它是如何工作的:

http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

最后，我认为您可以使用 float 以更简单的方式完成此布局。