将ul放在左下角

将ul放在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;  
}

来源

2013-07-03 Dan Cron

如果添加 “保证金：0像素” 你UL那么它应该工作。

来源

2013-07-03 16:18:37 bentedder

工作。非常感谢！ –

没问题。随意标记为“回答”:)。 – bentedder

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

来源

2013-07-05 14:58:37

将ul放在左下角

回答

相关问题