0

我正在尝试为页面创建布局，但我遇到了问题。

为什么水平主菜单（.logoc 旁边的#main_menu）被放置在容器底部？它应该在中间。

HTML：

<div class="content_wrapper">
    <div id="top_info">
        <ul class="hor_list" id="lang_menu">
            <li><a href="#">Finland</a>
            </li>
        </ul>
    </div>
</div>
<div id="header_wrapper">
    <div class="content_wrapper">
        <div id="header">
            <div class="logo"></div>
            <ul class="hor_list" id="main_menu">
                <li><a href="#">Home</a></li>                
            </ul>
        </div>
    </div>
</div>

CSS：

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
/* apply a natural box layout model to all elements */
 *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* CSS */
 .content_wrapper {
    width: 1000px;
    margin: 0 auto;
}
#top_info {
    width: 1000px;
    margin: 0 auto;
    height: 53px;
    line-height: 53px;
}
#header_wrapper {
    background: black;
    width: 100%;
    height: 82px;
}
#header {
    height: 82px;
    width: 1000px;
    background: #FF6633;
}
.logo {
    width: 131px;
    height: 82px;
    background: url('img/logo.png') no-repeat;
    display: inline-block;
}
.hor_list {
    display: inline-block;
}
.hor_list li {
    display:inline;
}
.hor_list li a {
    display: inline-block;
}
#main_menu {
    line-height: 82px;
}

这是 jsfiddle 工作示例：http: //jsfiddle.net/T9qpQ/

4

3 回答 3

2

http://jsfiddle.net/T9qpQ/3/

只需要做vertical-align: top;

.hor_list {
    display: inline-block;
    vertical-align: top;
}
于 2013-09-30T12:36:17.070 回答
1

尝试：

#main_menu {

  line-height: 82px;
  vertical-align:top;

}
于 2013-09-30T12:35:00.690 回答
0

将 CSS 更改为

.hor_list {
display: inline-block;
vertical-align: top;
}
.hor_list li {
    display:inline;

}
.hor_list li a {
    display: inline-block;
}
#main_menu {
    line-height: 82px;
}
于 2013-09-30T12:42:42.017 回答