徽标图像和H1标题在同一行

Question

我想创建我的第一个网页,但我遇到了一个问题.

我有以下代码:

<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>

我想知道如何使徽标和H1在同一行.谢谢!

Answer 1

例如(DEMO):

HTML:

<div class="header">
  <img src="img/logo.png" alt="logo" />
  <h1>My website name</h1>
</div>

CSS:

.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

DEMO

Answer 2

试试这个:

1. 将两个元素放在容器DIV中.
2. 给该容器属性overflow:auto
3. 使用float:left将两个元素浮动到左侧
4. 给H1一个宽度,使它不占用它的父容器的整个宽度.

Answer 3

如果您的图片是徽标的一部分,为什么不这样做:

<h1><img src="img/logo.png" alt="logo" /> My website name</h1>

使用CSS更好地设计样式.

最佳做法是使您的徽标成为一个超链接,将用户带回主页.

所以你可以这样做:

<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1>

Answer 4

试试这个:

<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>

Answer 5

只需将 img 标签作为内容的一部分粘贴在 h1 标签内。