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

あなたのCSSはこのようなものでなければなりません

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

<div>また、外側<nav>を閉じて<nav>相対的に配置され、float プロパティがある場合、の幅が要素と要素div#containerの両方の幅にまたがることもありません。<h1><nav>

于 2013-06-18T10:29:12.023 に答える
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 に答える