Question

好的，所以这应该是在一个139px高度的标题中，它在Dreamweaver中呈现，但是一旦我在浏览器中查看它，菜单div就会分成第二行。

这是HTML：

<div id="header">
    <div id="header2">
        <div id="title">
            <a href="index.html"><img src="titleimg.png" border="0" /></a>
        </div>
        <div id="menu">
        <div id="one"></div>
            <div id="two"></div>
            <div id="three"></div>
            <div id="four"></div>
            <div id="five"></div>
        </div>
   </div>
</div>

这是CSS：

#header {
    top: 0;
    left: 0;
    position: fixed;
    height: 139px;
    width: 100%;
    background-image: url('headerbg.png');
    border-bottom: solid 1px #797978;
    text-align: center;
    display: inline-table;
}
#header2 {
    width: 1040px;
    margin: 0 auto;
    text-align: left;
}
#title {
    padding-top: 27px;
    width: 287px;
    height: 112px;
    background-image: url('title3d.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    float: left;
}
#menu {
    width: 753px;
    height: 13px;
    border-left: solid 1px #474747;
    display: inline-table;
}
#one {
    width: 19%;
    height: 139px;
    border-right: solid 1px #474747;
    float: left;
}
#two {
    width: 19%;
    height: 139px;
    border-right: solid 1px #474747;
    float: left;
}
#three {
    width: 19%;
    height: 139px;
    border-right: solid 1px #474747;
    float: left;
}
#four {
    width: 19%;
    height: 139px;
    border-right: solid 1px #474747;
    float: left;
}
#five {
    width: 19%;
    height: 139px;
    border-right: solid 1px #474747;
    float: left;
}

非常感谢帮助！

Answer 1

你错误地认为你的总宽度是1040px，只需加上＃menu和#title的宽度，但是你忘了你的#menu上还有一个1px的边框 - 因此你的宽度变为1041因此被推翻了。因此，如果您将菜单或标题的宽度减少1个像素，那么您将很高兴：）

如果你要为＃one，#two等重复相同的代码，你也可以在菜单元素的css上保存一些代码：

#menu > div {
    width:19%;
    height:139px;
    border-right: solid 1px #474747;
    float:left;
}

Answer 2

title元素的宽度设置为287px;，大于容器。

Answer 3

我已经稍微调整了一下你的代码以使它变得清醒。

http://jsfiddle.net/gwfQt/

您实际面临的问题是，您已将#title和#menu的宽度完全划分为1040px，即标头的宽度。但是，您没有考虑#menu内的DIV有边界。

如果你有不同div的重复样式，也建议你使用类。如果我能用更好的代码改进我的答案，请告诉我。

浮动div不向左浮动

3 个答案: