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

Question

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

但我不知道如何让 div“ Logo ”和“sometext”与按钮位于同一行。我希望一切都保持原样，到处都是相同的颜色，只是最上面的两条线会成为 friend ，并希望一起留在同一条线上。

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/