Question

由于某种原因，我无法将我的徽标和导航菜单水平对齐在我的标题中。我还在搞清浮动和显示属性，我猜这是问题所在。我已经尝试过将display：inline-block放在两者上，这似乎有效，直到我把宽度：100％放在我的navContainer上。那我该怎么做呢？

这是我jsfiddle的麻烦。提前谢谢。

编辑：我的意思是说我正在尝试在我的徽标右侧创建navContainer。浮动：我的徽标左侧工作，但在标题上方留出一个空白区域。

CSS

#header {
    width: 100%;
    height: 100px;
    background-color: #DDDDDD;
}

#innerHeader {
    margin: 0 auto;
    width: 75%;
    height: 100px;
}

#logo {
    width: 100px;
    height: 100px;
}

#navList {
    margin-left: 50px;
    width: 100%;
    height: 100px;
    background-color: red;
}

#navList li {
display: inline;
list-style-type: none;
padding-right: 20px;
}

HTML

<div id="wrapper">
    <div id="header">
        <div id="innerHeader">
            <div id="logo">
                <img src="http://i.imgur.com/ZZvupYE.png" title="Bad Gizmod" />
            </div>
            <div id="navList">
                <ul>
                    <li><a href="#">Item two</a>

                    </li>
                    <li><a href="#">Item three</a>

                    </li>
                    <li><a href="#">Item four</a>

                    </li>
                    <li><a href="#">Item five</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- {block:Posts} {/block:Posts} -->

Answer 1

编辑：

我想OP想要在他的徽标右侧。

http://jsfiddle.net/N9rk5/6/

这是

的css

#header {
    width: 100%;
    height: 100px;
    background-color: #DDDDDD;

}

#innerHeader {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100px;
}

#logo {
    float: left;
    width: 20%;
     margin: 0 auto;
    height: 100px;
    display: inline-block;
}

#navList {
     display: inline-block;
     width: 70%;
    margin-left: 0px;
    float: right;
     text-align: center;
    height: 100px;
    background-color: red;
}

#navList li {

    display: inline;
    float: left;
    list-style-type: none;
    padding: 0 5px;
}

Answer 2

尝试添加：

#logo {
    float: left;
}

不要忘记清除你的花车！

在标题中水平对齐徽标和导航菜单

2 个答案: