Question

在div的左下角放置ul的最佳方法是什么？

这是我能想到的最接近的，使用ul。 http://jsfiddle.net/dan_cron/jUef2/

如果我摆脱ul，并使用div代替，我可以做到。 http://jsfiddle.net/dan_cron/jUef2/0/

为什么ul的行为与div不同？
我可以只用css移动ul吗？
有没有更好的方法将导航栏放在div的左下角？

HTML

<div class="big">
     <ul class="middle_left"> 
         <li>Small left</li>
     </ul>   
     <div class="middle_right">
         Big right
     </div>
</div>

CSS

.big {
    overflow: auto;
    position: relative;
    border: 1px solid;
}
.middle_left {
    border: 1px solid;
    position: absolute;
    bottom: 0px;
}
.middle_right {
    float: right;
    border: 1px solid;
    line-height: 48px;    
}

Answer 1

如果您将“margin：0px”添加到UL，那么它应该可以正常工作。

Answer 2

ul与div不同的原因是由于浏览器提供的默认样式表。

这是一篇描述默认样式表的简短文章。 http://www.lifeathighroad.com/web-development/understanding-a-browsers-default-css/

以下是有关不同浏览器默认设置的特定信息的图表。 http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm

查看图表，在大多数情况下，浏览器在ul的顶部和底部提供默认的1em边距。虽然div没有默认边距，但div上的默认边距为0。

bentedder的回答通过覆盖浏览器的ul默认边距来解决问题。

在Firebug中，默认情况下，查看浏览器的默认CSS样式是关闭的。要在Firebug中打开它，请在HTML选项卡上的“样式”选项卡上选择“显示用户代理CSS”。

将ul放在左下角

2 个答案: