如何放置Logo＆amp;导航在一行

Question

我有一个css和HTML代码，标题中有两个部分：一个用于Logo，另一个用于导航。我想把它们放在同一行，这样可以节省一些空间并且看起来更好。有人可以指导我如何做到这一点吗？

http://css.pastebin.com/AdGMQum5

Answer 1

1. 设置徽标的宽度，例如100px;
2. Float:left; logo
3. 从width:100%;
移除float:left;和#nav
4. 为overflow:hidden;
添加#nav
5. 为clear:left;
添加#content

直播示例： http://jsbin.com/eyozo

Answer 2

最简单的方法就是在background-image元素上使用h1：

h1 {
    padding-left: 200px; /* width of the image plus a 'buffer' between image and text */
    height: 150px; /* vertical height of the image */
    line-height: 150px; /* to vertically-align the image with the text */
    background: #fff url(path/to/image.png) 0 0 no-repeat;
}