ホバーを使用してdivをインラインで表示する

Question

ロゴのcharcolバージョンにカーソルを合わせると、htmlの& cssを使用してロゴのカラーバージョンを表示しています。

私はロゴは、次のようにお互いにインラインで表示させたい：

X - X - X
X - X - X

代わりに、彼らは次のように表示されています。

X
X
X

誰も助けることができる - 私はそれが何か単純でなければならないと確信しています。 VはCSS/HTMLで未経験です。

HTML：

<div class="all-logos"> 
    <div class="logo"> 
    <div class="charcol-logo"><img src=grey2.png></div> 
    <div class="color-logo"> 
     <a href=http://www.bbc.co.uk><img src=color2.png></a> 
    </div> 
    </div> 
    <div class="logo"> 
    <div class="charcol-logo"><img src=grey1.png></div> 
    <div class="color-logo"> 
     <a href=http://www.bbc.co.uk><img src=red1.png></a> 
    </div> 
    </div> 
</div> 

はCSS：

.logo:hover>.charcol-logo { 
    display: none; 
} 

.logo:hover>.color-logo { 
    display: inline-block; 
} 

.color-logo { 
    display: none; 
} 

.all-logos { 
    width: 30%; 
    border: black 1px solid; 
} 

.all-logos img { 
    max-width: 100% 
} 

Answer 1

私はあなたがフレックスで探しているものを達成することができましたボックスのプロパティ。

.all-logos { 
    max-width: 30%; 
    border: black 1px solid; 
    display:flex; 
    flex-direction:row; 
} 

Answer 2

あなたのスタイルシートに以下を追加します。..

.all-logos .logo { 
    display: inline-block; 
    margin: 0 10px; /* Only if you want space between elements */ 
} 

Answer 3

このようなものは何ですか？

.logo:hover>.charcol-logo { 
 
    display: none; 
 
} 
 

 
.logo:hover>.color-logo { 
 
    display: inline-block; 
 
} 
 

 
.color-logo { 
 
    display: none; 
 
} 
 

 
.all-logos { 
 
    width: 30%; 
 
    border: black 1px solid; 
 
} 
 

 
.all-logos img { 
 
    max-width:100%; 
 
} 
 

 
.all-logos .logo { 
 
    display: inline-block; 
 
}

<div class="all-logos"> 
 
    <div class="logo"> 
 
    <div class="charcol-logo"><img src="http://placehold.it/50x50"></div> 
 
    <div class="color-logo"> 
 
     <a href="http://www.bbc.co.uk"><img src="https://dummyimage.com/50x50/000/fff"></a> 
 
    </div> 
 
    </div> 
 
    <div class="logo"> 
 
    <div class="charcol-logo"><img src="http://placehold.it/50x50"></div> 
 
    <div class="color-logo"> 
 
     <a href="http://www.bbc.co.uk"><img src="https://dummyimage.com/50x50/000/fff"></a> 
 
    </div> 
 
    </div> 
 
</div>