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 
}