在左边和在同一条线上移动徽标

Question

我想将徽标移到网站标题和说明的左侧。我用谷歌搜索CSS调整重新定位徽标，但它没有工作。我对CSS几乎一无所知。

有人可以帮我吗？该网站是www.cebubibleseminary.com

Answer 1

它不起作用的原因是标题自动创建新行。这个网站做了类似的事情：

palyrobotics.com

使用“display：inline;”样式创建标题。请参阅下面的示例：

<img src="/assets/img/logos/main_logo.png" width="100" height="50">
<div class="show-for-small-only">
  <h2 style="display:inline; margin-left:-10px;">Paly Robotics</h2>
</div>

你会这样做：

<a href="http://www.cebubibleseminary.com/" title="Cebu Bible Seminary Inc." rel="home" class="site-intro">
  <img alt="Cebu Bible Seminary Inc." src="http://0.gravatar.com/avatar/cc3b29587548d89dfb16b15223a18995?s=256&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D256&amp;r=G" class="avatar avatar-256 photo" height="256" width="256">
  <h1 class="site-title" style="display:inline;">Cebu Bible Seminary Inc.</h1>
  <h2 class="site-description"></h2>
</a>

这应该有效。 LMK，如果没有。

Answer 2

您好，欢迎堆栈溢出。 我希望这有帮助

CSS修复

.site-intro .avatar {
width: 104px;
float: inherit;
}

这是它将如何照顾

Answer 3

你的标签有误。这应该是一个CSS问题。

要解决您的问题，只需将内容放入2个div中即可。例如，应用样式属性float left和float right。如果要对齐它们，请使用属性宽度。一个例子：

<div style="float:left; width:300px;">
  <img alt="Cebu Bible Seminary Inc." src="http://0.gravatar.com/avatar/cc3b29587548d89dfb16b15223a18995?s=256&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D256&amp;r=G" class="avatar avatar-256 photo" height="256" width="256">
</div>
<div style="float:right"; width:800px;>         
  <h1 class="site-title">Cebu Bible Seminary Inc.</h1>
  <h2 class="site-description"></h2>
</div>