div内のアイテムの位置が維持されない

Question

Iメニューdivを作成しました。この部門では、左側に2つのリスト項目とロゴを追加したいと思います。 しかし、たとえば、メニュー項目にパディングや高さを指定すると、jsフィドルに表示されているようにメニューdivの外に出ます。アイテムは親の外に出てはいけません。

Answer 1

あなたはそれが自動的にあなたのリストのサイズに拡大させるために#menuからheight:100px;を削除するには、メニュー要素

#logo { 
    height:50px; 
    width:80px; 
    background-color:red; 
    float:left; // add this 
} 
#menu ul { 
    // margin-left:70%; // remove this 
    float:right; // add this 
    position: relative; 
    line-height: 100px; 
} 

https://jsfiddle.net/c6tp9zmx/1/

Answer 2

に与えられたマージンの代わりにFLOATED要素を使用する必要があります。代わりにmin-heightを設定することができます。また、リスト項目と同じ水平軸上に置く必要がある場合は、marginとline-heightのリスト項目をさらに適切な値に設定し、float:left;〜#logoを追加します。