Question

我想将#nav div放在页面中心。在内部我希望其他div保持在同一条线上，由我的10 + 10px边距分开，到目前为止。我不希望内部div在单独的行上折叠，同时缩小页面太小..

<iframe width="100%" height="300" src="http://jsfiddle.net/tH2cc/789/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

http://jsfiddle.net/tH2cc/789/embedded/result/

Answer 1

试试这个：

从嵌入式float:left

div

将white-space:nowrap; display:inline-block;添加到您的容器div

以下是修改后的版本：http://jsfiddle.net/9e4hX/

Answer 2

只需将#nav div设置为具有固定宽度（包含元素的总宽度）并将display设置为block。然后清除元素之后的浮点数以保持#nav div围绕它们。不要使用table-cell作为显示。

CSS

#nav { display: block; width: 416px; }

HTML

<div id="nav">
<div id="bark"></div>
<div id="profile"></div>
<div id="read"></div>
<div id="write"></div>
<div style="clear: both;"></div>
</div>

Answer 3

试试这个

#nav{
    padding:10px;
    background-color:rgb(77,77,77);
    display: inline-table;
    vertical-align:middle;
    width: 70%;
    margin-left: 15%;
}

检查此fiddle

Answer 4

将容器div更改为display: table而不是table-cell并添加margin: auto

http://jsfiddle.net/3j5kc/

#nav{
    padding:10px;
    background-color:rgb(77,77,77);
    display: table;
    margin: auto;
    vertical-align:middle;
}

如何在div中保持内部div而在css中的同一行？

4 个答案: