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>

和以下中心:

#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这两个公司都应在脚步内出现。当我接下去时,请见ABC是脚步。每个人都能看到我做的错事。我多次检查,仍然看不到什么错误。

Answer 1

实现你迄今为止的意图。

On #ftr_rgt, you need to set position to absolute, instead of relative.
On the parent of #ftr_rgt (which is #ftr_btm, you need to set position: relative.
Lastly, you need to add right: 0 to #ftr_rgt. You already have top: 0.

http://jsfiddle.net/a4Gar/1/“rel=“nofollow” http://jsfiddle.net/a4Gar/1/。

如果您重新尝试使用<代码>relative /absolute 您担任职务时,需要接手如何开展工作:

http://csss-tricks.com/791-absolute-positioning-inside-rel-positioning/

最后,我认为,你能够以更简单的方式完成这一规定,即<代码>float。

Answer 2

Here s your problem - block-level elements like divs will not appear next to each other unless you change the way they re displayed. Currently, #ftr_ctr is taking up the entire footer, and #ftr_rgt is appearing below it.
There are a couple ways to move #ftr_rgt up. Since it has position:relative;, you can give it a top:-20px; to slide it up. The downside it that it ll still reserve white space for itself below the footer.

您可制作<条码>#ftr_ctr和<条码>#ftr_rgt。 float:left; and put a <div way=“clear: both;”></div> after them. 你们需要调整他们各自的宽度,以便他们能够走到正确的道路上。

您可确定两者中哪一个有<条码>的显示:内联网-锁;。

您甚至可以仅使用<代码> 显示:inline。

Answer 3

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

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>

这可能是你所期待的,但我不知道你如何想用案文。

友情链接