0

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

这是我能想到的最接近的，使用 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;    
}
4

2 回答 2

3

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

于 2013-07-03T16:18:37.653 回答
0

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 的答案通过覆盖浏览器的默认边距来解决问题。

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

于 2013-07-05T14:58:37.520 回答