Question

我有以下内容：

HTML：

<div id="wrapper">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

CSS：

div {
    height: 178px;
}

#wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}

#left, #center, #right {
    display: table-cell;
}

#center {
    width: 1100px;
}

#left {
    background: url(left.gif) repeat-x;
}

#center {
    background: url(center.gif) no-repeat center center;
}

#right {
    background: url(right.gif) repeat-x;
}

请参阅：fiddle

我想在中心部分的橙色部分放置一个水平菜单，在黄色部分放置另一个水平菜单;

我试过了：

HTML：

<div id="wrapper">
    <div id="left"></div>
    <div id="center">

        <ul id="menu1">
<li><a href="#">Home</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Partnerships</a></li>
<li><a href="#">Contact</a></li>
</ul>

         <ul id="menu2">
<li><a href="#">Home</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Partnerships</a></li>
<li><a href="#">Contact</a></li>
</ul>

    </div>
    <div id="right"></div>
</div>

添加了CSS：

#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}

#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}

请参阅：fiddle

但没有成功，请帮助！

Answer 1

您可以使用相对定位（https://developer.mozilla.org/en-US/docs/Web/CSS/position#Relative_positioning），例如

http://jsfiddle.net/67UWv/

<强> CSS

#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
    position:relative;
    top:85px;
    right:30px;
}

#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
    position:relative;
    top:110px;
    right:30px;
}

修改 - 与上次评论相关

为了消除菜单图像周围的白色间距，需要为margin:0元素设置body以覆盖默认的用户代理样式规则。

body{
margin:0px;
}

http://jsfiddle.net/67UWv/1/

修改 - 对最新评论的回复

当内容被放置在#center div内时，注意到的白色间隙是从ff（测试原始小提琴http://jsfiddle.net/6GE3x/27/show/）开始引起的。因此，在使用display:table和display:table-cell以及添加内容时存在一些问题。

为了避免使用实际表格进行布局以及与之相关的所有后果，可以使用绝对布局定位中心部分，如下所示：

http://jsfiddle.net/eH2m6/show/

http://jsfiddle.net/eH2m6/

<强> CSS

div {
    height: 178px;
}

#wrapper {
    /* display: table;
    table-layout: fixed; */
    width: 100%;
}

#left, #right {
    /* display: table-cell; */
/*the following will make #left and #right take full width*/
    float:left;
    width:50%;
}

#center {
    width: 1100px;
/*the following will position #center in the center*/
    position:absolute;
    left:50%;
    margin-left:-550px;
}

#left {
    background: url(http://dentaliran.ir/left.gif) repeat-x;
}

#center {
    background: url(http://dentaliran.ir/center.gif) no-repeat center center;

}

#right {
    background: url(http://dentaliran.ir/right.gif) repeat-x;
}

#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
    position:relative;
    top:85px;
    right:30px;
}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}

#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
    position:relative;
    top:110px;
    right:30px;
}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}

body{
margin:0px;
}

已经在ie8，ie9，chrome32.x，ff25.x

中进行了测试

把菜单放在标题中

1 个答案:

http://jsfiddle.net/eH2m6/show/