로고의 오른쪽에 플로트 탐색

Question

내 웹 사이트의 왼쪽 상단에 로고가 있습니다. 그리고 네비게이션 메뉴를 로고의 오른쪽에 수직으로 정렬하려고합니다. 하지만 항상 로고 하단에 나타납니다. 나는 float : left를 시도했다.

나는 간단한 일이지만 그렇게 할 수 없다고 생각합니다. 래퍼가 필요할 수 있습니다. 여기서 내가 뭘 잘못하고 있니?

.logo img { 
    float:left; 
} 

http://jsfiddle.net/87KCt/4/

CSS는 CASC입니다 :

이

이 내 CSS

.logo { 


} 
#topnav { 
    width:100%; 
    vertical-align:middle; 
} 


nav ul { 
    background: #FFFFFF; 
    padding: 0 10px; 
    list-style: none; 
    position:relative; 
    float:left; 
    display: inline-table; 
    font-size:90%; 
    color:#666666; 
} 

Answer 1

로고 클래스에 float: left을 추가하면됩니다. http://jsfiddle.net/dssHf/ 유효하지 않았기 때문에 HTML 코드가 재구성되었습니다.

<div class="container"> 

    <div class="logo"><a href="/"><img src="http://placehold.it/250x120" alt="" /></a></div> 

    <div class="topnav"> 
     <nav> 
      <ul> 
       <li><a href="http://www.kursatkarabulut.com/">Home</a></li> 
       <li><a href="http://www.kursatkarabulut.com/fiap/">Photos</a></li>   
      </ul> 
     </nav> 
    </div> 
</div> 

 

.container { 
    clear: both; 
} 
.logo { 
    float: left; 
} 
.logo img { 
    width: 250px; 
    height: 120px; 

} 
.topnav { 
    margin-left: 260px; 
} 

Answer 2

변경 .logo이에 내 HTML

<div class="container"> 

    <div class="logo"><a href="/"><img src="assets/images/logo.png" alt="" width="250" height="120"/></a> 


<div class="topnav"> 
<nav> 
    <ul> 
    <li><a href="http://www.kursatkarabulut.com/">Home</a></li> 
     <li><a href="http://www.kursatkarabulut.com/fiap/">Photos</a></li>   
    </ul> 
</nav> 

    </div> 
</div> 

입니다 스타일 시트. 이는 몇 가지 의미가 있지만 계단식은 클래스 .logo에 대한 스타일이 태그에만 캐스케이드됨을 의미합니다.