如何將div放在另一個容器內的容器中以正確顯示內嵌和浮動？

Question

我想讓div「nav」正確地浮動並顯示它的div內聯。另外，當我調整瀏覽器的大小時，我希望「導航」在「徽標」下滑動，並且不要將徽標留在徽標所在的同一行上。

下面是HTML：

<div id="header-container"> 
    <div id="header-wrap"> 
     <div class="left logo logoimg"> 
      <img src="images/Logo-Robert_Fikes_IV.png"/> 
     </div> 
     <div class="right nav"> 
      <div class="bluebutton">PORTFOLIO</div> 
      <div class="bluebutton">PORTFOLIO</div> 
      <div class="bluebutton">PORTFOLIO</div> 
     </div> 
    </div> 
</div> 

和CSS：

body { 
    background: #000000; 
    margin: 0; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 12px; 
    color: #FFFFFF; 
} 

img { 
    max-width: 100%; 
} 

.left { 
    float: left; 
} 

.right { 
    float: right; 
} 

#header-container{ 
    margin: auto; 
    padding: 80px 0px 0px; 
    max-width: 1160px; 
    width: 100%; 
    height: 200px; 
} 

#header-wrap{ 
    padding: 0px 40px 0px; 
    max-height: 100%; 
} 

.logo{ 
    max-width: 440px; 
    width: 100%; 
} 

.logoimg{ 

} 

.nav{ 
    margin-top: 20px; 
} 

.bluebutton{ 
    color: #00bff3; 
    border: 1px solid #00bff3; 
    padding: 8px 8px 8px; 
    margin: 0px 0px 0px 5px; 
} 

http://jsfiddle.net/wse63zzk/

Answer 1

完成。我將nav divs更改爲li元素，當然還有父div更改爲ul。這實際上就是你應該如何爲語義HTML製作導航菜單。

然後我添加了下面的CSS：

.nav { 
margin-top: 20px; 
list-style-type:none; 
} 
.right.nav li { 
float:right; 
} 

Fiddle