CSS：nav要素が新しい行にジャンプ

Question

私のコードの一部に引用符が含まれているウェブサイトを構築しようとしています。その右側にソーシャルリンクがほしいと思っています。

残念ながら、私のソーシャルリンクは、同じ行にあるのではなく、私の引用セグメントの下の行にジャンプします。理由はわかりません。

HERESに私のHTML：

<div class="quote--bar"> 
<div class="quote"> 
"To create an environment in which knowledge <br /> 
about information and its sphere can be obtained" 
</div> 
<nav class="socialImageContainer"> 
    <ul> 
     <li><a href="#" class="logos twitterLogo"></a></li> 
     <li><a href="#" class="logos instagramLogo"></a></li> 
     <li><a href="#" class="logos facebookLogo"></a></li> 
     <li><a href="#" class="logos tumblrLogo"></a></li> 
     <li><a href="#" class="logos linkedInLogo"></a></li> 
    </ul> 
</nav> 

そして、私のLESS：

.quote--bar { 
padding-top: 20px; 
background: @BGColor2; 
display: inline-block; 
.quote { 
    font-size: 24px; 
    font-family: 'Merriweather', serif; 
    color: @TXTColor2; 
} 
} 
.socialImageContainer { 
.logos { 
    margin: 20px 0; 
    float: right; 
    width: 51px; 
    height: 51px; 
} 
ul { 
    list-style: none; 
} 
li { 
    display: inline-block; 
} 

あなたは私が間違っているかもしれないものの任意のアイデアを持っている場合、それは非常に高く評価されるだろう！

Answer 1

navおよびdivはデフォルトでdisplay:blockです。したがって、navは前のdivの下に表示されます。

おそらく、その中のリンクではなくナビゲーションをフローティングすることを意味します。さらに、前のdivはdisplay:inline-blockまたはfloat:leftのいずれかである必要があります。

.quote--bar { 
padding-top: 20px; 
background: @BGColor2; 
display: inline-block; 
.quote { 
    float: left; /* <-- this one */ 
    font-size: 24px; 
    font-family: 'Merriweather', serif; 
    color: @TXTColor2; 
} 
} 
.socialImageContainer { 
    float: right; /* <-- and this one */ 
    .logos { 
    margin: 20px 0; 
    width: 51px; 
    height: 51px; 
} 
ul { 
    list-style: none; 
} 
li { 
    display: inline-block; 
} 
}