html - Divs 向左对齐并在同一行居中

Question

我正在尝试将页面布局为如下所示：http: //jsfiddle.net/LLqwX/1/

但我无法弄清楚如何让 div 的“logo”和“sometext”与按钮位于同一行。我希望一切都保持原样，到处都是相同的颜色，只是前两条线会成为朋友，并希望一起保持在同一条线上。

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
}

Answer 1

只需添加display: inline-block到#menu.

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

Answer 2

您可以使用在其他地方使用过的相同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/

Answer 3

保持按钮居中的另一种方法是使用 flex 布局。

这是一个显示如何的FIDDLE 。

CSS

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

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