html - 将导航栏移动到标题中的图像旁边

Question

我是 HTML/CSS 的新手，我在将导航栏移动到标题中的图像旁边时遇到了问题。我已经尝试了很多 margin 、 float 等，但它似乎不起作用。谁能给我一个建议。谢谢:)

HTML

<div class="container">
    <div class="logo">
        <img src="unilogo.png" width="100">
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Modules</a></li>
            <li><a href="#">Timetable</a></li>
            <li><a href="#">Career Opportnuities</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

CSS

body{
    width: 100%;
    margin: auto;
    padding-top: 9%;
}

.container {
    width: 960px;
    margin: 0 auto;
}

.header{
    background: black;
    width: 100%;
    top: 0;
    position: fixed;
    height: 15%;
    margin-top: 0%
}

.logo{
    float: left;
    margin-left: 0;
    margin-top: 1%
}

.logo img{
    width: 22%;
    height: 1%;
}

a{
    text-decoration: none;
    color: blue;
}

li{
    list-style: none;
    float: left;
    margin-left: 15px;
    padding-top: 0px;
}

.nav{
    float: right;
    clear: right;
    margin-top: 0%;
}

Answer 1

只需将 display:inline-block; 添加到 .logo 和 .nav 类即可

此处示例:http://jsfiddle.net/459qmhrw/