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>

希望我帮助..

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>和<nav>元素。

如何使容器div与其中的h1元素一样宽

5 个答案: