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