Question

全部，

我现在已经摸不着头两个多小时了，我只是看不出代码的错误。

我正在构建一个液体布局，顶部有两个导航栏。第一个坐得很好，但第二个（id =“filem_right”）拒绝坐在它旁边。

以下是HTML ：

<body id="container">
        <div id="main_bar">
            <ul>
                <li class="maintabs"><a href="#">Overview</a></li><li class="maintabs"><a href="#">Collar/ Neckline</a></li><li class="maintabs"><a href="#">Sleeves</a>
                <ul>
                    <li class="s_leftright"><a href="#">Left Sleeves</a></li>
                    <li class="s_leftright"><a href="#">Right Sleeves</a></li>
                </ul></li><li class="maintabs"><a href="#">Body</a></li>
            </ul>
        </div>

        <div id="filem_right">
            <ul>
                <li class="filetabs"><a href="#">File</a></li><li class="filetabs"><a href="#">Edit</a></li><li class="filetabs"><a href="#">Settings</a></li>
            </ul>
        </div>

这是CSS ：

#container {
    min-width: 960px;
    max-width: 1034px;
    min-height: 500px;
    background: rgba(245,212,13,1);
}


/* START OF MAIN MENU */
 #main_bar ul {
    width: 60%;
    position: relative;
    left: 3.2%;
    border: 1px solid black;
    background: rgba(153, 244,200,0.3);
}

.maintabs {
    display: inline-block;
    width: 25%;
    line-height: 3.5em;
    list-style-type: none;

}

.maintabs a {
    display: block;
    text-decoration: none;
    color: rgb(165,165,165);
    color: rgba(165,165,165,1);
    text-align: center;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}

.s_leftright {
    list-style-type: none;
}

.maintabs ul {
    display: none;
}

.maintabs:hover > ul {
    display: inline-block;
    position: absolute;
}
*/ END OF MAIN MENU */


/* START OF FILE MENU */
#filem_right {
    display: inline-block;
    position: relative;
    width: 30%;
    left: 69%;
    top: 14%;
    right: 3.2%;
}

.filetabs {
    display: inline-block;
    width: 33.3%;
    overflow: hidden;
    list-style-type: none;
    line-height: 3.5em;
}

我查看了Firebug，看来我的“filem_right”代码都没有被浏览器渲染（FF 3.6）。

谢谢，

Answer 1

您的评论不正确，

*/ END OF MAIN MENU */

一开始应该是/*。这可能是浏览器未选择filem_right CSS的原因。

CSS - 并排放置两个栏

1 个答案: