將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放在左下角

回答

相關問題