排列带有标题的图像

Question

我有this site header我正在努力，但我无法将徽标和网站标题水平排列。我对CSS比较陌生，所以我很感激任何人可以提供的任何手持设备; - ）

徽标图片的样式为：

.logo {
    float:left;
}

而h1.site-title和h2.site-description文本的样式是这样的：

 h1.site-title, h2.site-description { 
    position:relative;
    margin-left: 130px; !important
 }

我很确定我需要制作另一个DIV并且无法正确定位，因此徽标位于左侧，然后紧邻其下方的网站标题/说明。

Answer 1

（它应该是#logo）将它们左移两个作品

#logo {
    float: left;
}
.home-link {
    float: left;
}

并删除左边距

Answer 2

我建议改变一些事项：

1. 在您的HTML中，您将徽标设置为ID，因此在CSS中应使用＃而不是句点。
2. 您不需要在CSS中对您的类进行标记限定，这意味着不需要h1和h2，只需.site-title和.site-description就可以了。
3. 尽可能避免使用！important。它使你的代码很难在以后调整。
4. 而不是使用.site-title和.site-description使用它们的包装容器.home-link。将它和#logo一起浮动。
5. 如果您希望它们并排排列，则必须将home-link的宽度更改为小于100％的值。
6. 删除margin-left。

所以你的CSS看起来像这样：

#logo { float: left; }
.home-link { float: left; width: 75%; }