2

我需要容器 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>

我该怎么做呢？谢谢！

4

5 回答 5

2

将容器 div 的显示设置为 inline-block

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

您也可以将此行添加到您的 CSS 文件中

#container { display: inline-block; }
于 2013-06-18T10:24:21.910 回答
0

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

#container {
  background: red;
  display: inline-block;
}
于 2013-06-18T10:25:48.527 回答
0 
    <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>

希望我帮助..

于 2013-06-18T10:27:35.080 回答
0

你应该使用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>
于 2013-06-18T10:27:35.143 回答
0

你的 CSS 应该有这样的东西

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

也不是说如果你关闭你的<div>外部<nav>并且你<nav>的位置相对并且具有浮动属性，那么宽度div#container将跨越<h1>和<nav>元素的宽度。

于 2013-06-18T10:29:12.023 回答