Question

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

但我无法弄清楚如何让divs“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

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

这是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
}

Div在同一条线上左对齐并居中

HTML

CSS

3 个答案: