DIVs沒有正確排隊的問題

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秒。

Answer 2

這是你的問題 - 像divs一樣的塊級元素而不是彼此相鄰，除非你改變它們的顯示方式。目前，#ftr_ctr正在佔用整個頁腳，並在其下方出現#ftr_rgt。
有幾種方法可以將#ftr_rgt向上移動。由於它有position:relative;，您可以給它一個將其向上滑動。它的缺點是它仍然會在頁腳下面留下自己的空白空間。

您可以同時使#ftr_ctr和#ftr_rgtfloat:left;，並在其後放置<div style="clear:both;"></div>。不過，您需要調整其中的每一個的寬度以使其排列正確。

可以設置兩者有display:inline-block;

你甚至可以只用display:inline以及脫身。

Answer 3

<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> 

這可能是你在找什麼，但我不知道你想如何格式化文本。

Answer 4

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