html - 图片强制向下列表 CSS

Question

这是我的代码:http://jsfiddle.net/gxLt5/

HTML

    <nav class="header">
        <img src="smiley.gif" alt="Smiley face" height="32" width="42">
    <ul class="navigation">
            <li id="a" class=""><a
                    href="#"><span></span>A</a></li>
            <li id="b" class=""><a
                    href="#"><span></span>B</a></li>
        <li id="account" class="right">
            <a href="/admin/profile"><span></span>Test Test</a>
            <ul class="dropdown">
                <li><a href="/users/logout">Log out</a></li>
            </ul>
        </li>
    </ul>
</nav>

当我在顶部添加图像时，它会将列表向下推到 View 之外。我怎样才能使我的图像位于列表的左侧，并且仍然在其右侧显示列表。

Answer 1

添加以下css；

.header img {
    float:left
}
.header .navigation {
    float:left;
}

Fiddle