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

这是你的问题 - 像div这样的块级元素将不彼此相邻，除非你改变它们的显示方式。目前，#ftr_ctr占据整个页脚，#ftr_rgt出现在其下方有两种方法可以移动#ftr_rgt。由于它有position:relative;，因此您可以为其top:-20px;添加幻灯片。它的缺点是它仍然会在页脚下面保留空白区域。

您可以同时制作#ftr_ctr和#ftr_rgt float:left;，然后在其后加<div style="clear:both;"></div>。但是，您需要调整每个宽度以使它们正确排列。

您可以将它们都设置为display:inline-block;

您甚至可以使用display:inline来逃避。

Answer 2

#ftr_rgt {
    text-align: right;
    font-size:0.8em;
    position: absolute;
    top: 0px;
    right: 0px
}

Answer 3

从你到目前为止的猜测你的意图..

在#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以更简单的方式完成此布局。

Answer 4

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

这可能是您正在寻找的，但我不确切地知道您希望如何格式化文本。

DIV没有正确排队的问题

4 个答案: