将菜单放在标题中

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;
}

参见： 小提琴

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

我尝试了这个：

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;}

参见： 小提琴

但是没有没有成功，请帮助！

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;
}

编辑 -与最近的评论有关

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

body{
margin:0px;
}

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

编辑 -回复最新评论

注意到的白色间隙是从一开始就在ff中引起的（测试原始小提琴http://jsfiddle.net/6GE3x/27/show/ ），是将内容放置在#center div中。 因此，在使用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中进行了测试