0

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;    
}
4

2 に答える 2

3

UL に「margin:0px」を追加すると、機能するはずです。

于 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 です。

ベンテダーからの回答は、ブラウザーのデフォルトの ul マージンをオーバーライドすることで問題を解決します。

Firebug では、既定で、ブラウザーの既定の CSS スタイルの表示はオフになっています。これをオンにするには、Firebug の [HTML] タブの [スタイル] タブで、[ユーザー エージェント CSS を表示] を選択します。

于 2013-07-05T14:58:37.520 に答える