2つのDivを1つのボックスに入れますか？

Question

私は（非浮動）floatを使用して、浮動項目は、 "通常の" の前に置かなければならない場合、私は1つのdiv

html { 
    margin: auto; 
    width: 960px; 
    height: auto; 
} 

#navbar { 
    height: 90px; 
    background-color: #080808 !important; 
    display: block; 
} 

.logo { 
    padding-left: 31px; 
    height: 90px !important; 
    width: 90px !important; 
} 

.navitems li, 
.navitems ul { 
    list-style-type: none; 
    display: inline-block; 
} 

.navitems { 
    float: right; 
} 

<div id="navbar"> 
    <div class="logo"> 
    <img src="images/logo.png" alt="" width="90px" height="90px"> 
    </div> 
    <div class="navitems"> 
    <li> 
     <ul><a href="#">Home</a></ul> 
     <ul><a href="#team">Contact Us</a></ul> 
     <ul><a href="#about">About</a></ul> 
    </li> 
    </div> 
</div> 

Answer 1

で2つのdivを取得する方法を疑問に思いましたDOMツリー内のアイテムこの場合、<div class="logo">の前に<div class="navitems">を移動することをお勧めします。また、<ul>タグと<li>タグを並べ替えることもできます。 <ul>には<li>が含まれています。 ;）

Answer 2

2 divは1 divのみですが、floatプロパティはフローを変更しません.Floated要素は絶対位置と固定位置とは異なり、Webページのフローの一部として残るため、div class = " navitems "をdivクラス=" logo "の上に置いてください。また、ulとliの相互交換は概念的には間違っていますが、視覚的に違いはありません。

Answer 3

まず、これら2つのDIVでdisplay: inline-block;を使用してください。また、両者でvertical-align: middle;を使用すると、コンテナの中央に垂直に配置することができます。

しかし、あなたのコードであり間違い：ulとliは、他の方法でラウンドを使用する必要があり、li sが内部ulです。 list-style-type: none;はulにのみ割り当てられ、display: inline-block;はli要素にのみ割り当てられます。

#navbar { 
 
    height: 90px; 
 
    background-color: #080808 !important; 
 
    display: block; 
 
} 
 

 
.logo { 
 
    display: inline-block; 
 
    padding-left: 31px; 
 
    height: 90px !important; 
 
    width: 90px !important; 
 
    vertical-align: middle; 
 
} 
 
.navitems { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.navitems ul { 
 
    list-style-type: none; 
 
} 
 
.navitems li { 
 
    display: inline-block; 
 
    margin-right: 4em; 
 
}

<div id="navbar"> 
 
    <div class="logo"> 
 
    <img src="http://placehold.it/90x90/fb4" alt="" width="90px" height="90px"> 
 
    </div> 
 
    <div class="navitems"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#team">Contact Us</a></li> 
 
     <li><a href="#about">About</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 4

それはフレックスを使用して、おそらく良いでしょう。

親要素（ナビゲータ）に「display：flex」と「justify-content：space-between」を設定します。私はまた、背景色が目立つようにイメージを変更しました。

フレックス性質上

html { 
 
    margin: auto; 
 
    width: 960px; 
 
    height: auto; 
 
} 
 

 
#navbar { 
 
    height: 90px; 
 
    background-color: #080808 !important; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
img { 
 
    background-color: #0ff; 
 
} 
 

 
.logo { 
 
    padding-left: 31px; 
 
    height: 90px !important; 
 
    width: 90px !important; 
 
} 
 

 
.navitems li, 
 
.navitems ul { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
}

<div id="navbar"> 
 
    <div class="logo"> 
 
    <img width="90px" height="90px"> 
 
    </div> 
 
    <div class="navitems"> 
 
    <li> 
 
     <ul><a href="#">Home</a></ul> 
 
     <ul><a href="#team">Contact Us</a></ul> 
 
     <ul><a href="#about">About</a></ul> 
 
    </li> 
 
    </div> 
 
</div>

より： https://css-tricks.com/snippets/css/a-guide-to-flexbox/