如何使容器div與h1元素一樣寬

Question

我需要容器div與h1元素一樣寬，並隨字體大小更改而變化。目前所有內容都與頁面一樣寬。

這是代碼：

<div id="container"> 
<h1>ABCDEFGH</h1> 
<nav id="site-navigation" class="main-navigation" role="navigation"> 
     <div class="main-menu-container"> 
      <ul id="menu-main-menu" class="nav-menu"> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Menu item 2</a></li> 
       <li><a href="#">Credits</a></li> 
       <li><a href="#">Test item 4</a></li> 
      </ul> 
     </div>  
</nav> 
</div> 

我該怎麼辦呢？謝謝！

Answer 1

設置的容器div的顯示，以inline-block的

<div id="container" style="display:inline-block"> 

您可以將此行或者添加到您的CSS文件

#container { display: inline-block; } 

Answer 2

http://codepen.io/2ne/pen/LjrEB

#container { 
    background: red; 
    display: inline-block; 
} 

Answer 3

<div id="container"> 
    <h1>ABCDEFGH</h1> 
    <nav id="site-navigation" class="main-navigation" role="navigation"> 
      <div class="main-menu-container"> 
       <ul id="menu-main-menu" class="nav-menu"> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Menu item 2</a></li> 
        <li><a href="#">Credits</a></li> 
        <li><a href="#">Test item 4</a></li> 
       </ul> 
      </div>  
    </nav> 
    </div> 

    <style> 
    #container{ 
    display: inline-block; 
    } 
    </style> 

希望我幫助d ..

Answer 4

您應該使用display：inline-block;在容器上：

http://jsfiddle.net/gtJMD/

<div id="container" style="background:red;display:inline-block;"> 
<h1>ABCDEFGH</h1> 
<nav id="site-navigation" class="main-navigation" role="navigation"> 
     <div class="main-menu-container"> 
      <ul id="menu-main-menu" class="nav-menu"> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Menu item 2</a></li> 
       <li><a href="#">Credits</a></li> 
       <li><a href="#">Test item 4</a></li> 
      </ul> 
     </div>  
</nav> 
</div> 

Answer 5

你的CSS應該有這樣的事情

#container { 
    float:left; 
    display:inline-block; 
} 

也沒有，如果你關閉了<div>外<nav>和你<nav>相對定位，並具有浮動屬性的寬度爲div#container將跨越<h1>和的寬度元素。