2

好的，所以这一切都应该在一个 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;
}

帮助将不胜感激！

4

3 回答 3

2

你错误地认为你的总宽度是 1040 像素，只是将 #menu 和 #title 的宽度相加，但你忘记了你的 #menu 上还有一个 1px 的左边框，因此你的宽度变为 1041，因此被推送超过。因此，如果您将菜单或标题的宽度减少 1 像素，您会很高兴:)

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

#menu > div {
    width:19%;
    height:139px;
    border-right: solid 1px #474747;
    float:left;
}
于 2013-08-09T08:45:58.403 回答
1

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

于 2013-08-09T08:35:06.417 回答
0

我已经稍微调整了您的代码以使其保持理智。

http://jsfiddle.net/gwfQt/

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

如果您对不同的 div 有重复的样式，还建议您使用类。让我知道我是否可以用更好的代码改进我的答案。

于 2013-08-09T08:55:33.773 回答