0

ページを次のようにレイアウトしようとしています: http://jsfiddle.net/LLqwX/1/

しかし、divの「ロゴ」と「テキスト」をボタンと同じ行に配置する方法がわかりません。上の 2 つの行が友達になり、一緒に同じ行にとどまりたいというだけで、どこでも同じ色で、すべてそのままにしておきたいと思います。

HTML

<div id="top">
    <div id="logo">logo</div>
    <div id="sometext">text text</div>
    <div id="menu">
        <a href="#">btn 1</a>
        <a href="#">btn 2</a>
        <a href="#">btn 3</a>
    </div>
</div>
<div id="content">
    <div id="hello">
        hello
    </div>
</div>

CSS

#top {
    background: #ccc;
}
#logo {
    display: inline-block;
    background: #ff00ff;
}
#sometext {
    display: inline-block;
    background: #ffff00;
}
#menu {
    text-align: center;
}

#content {
    background: #444;
}
#hello {
    width: 40%;
    margin: 0 auto;
    background: #888
}
4

3 に答える 3

0

に追加display: inline-blockするだけ#menuです。

http://jsfiddle.net/LLqwX/3/

于 2013-09-06T21:53:23.637 に答える
0

他の場所で使用したのと同じinline-block方法を使用できます。

#menu {
   display: inline-block;
   text-align: center;
}

http://jsfiddle.net/LLqwX/2/

編集：

おそらくボタンを中央に配置したいでしょう。これを構造化するには多くの方法がありますが、元のコードへの変更を最小限に抑えようとしました。

<div id="headleft">
    <div id="logo">logo</div>
    <div id="sometext">text text</div>
</div>

div#headleft {
    position:absolute;
}

http://jsfiddle.net/LLqwX/4/

于 2013-09-06T21:53:40.973 に答える