logo标签列表

标志图像和H1标题在同一行上

htmlcsspositioninline
80

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

我有以下代码：

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

我想知道如何让logo和H1标题在同一行显示。谢谢！

13个回答
113
例如（演示）：
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;
}

演示

@Speransky 几乎一样... ;) - Mr. Alien
@SperanskyDanil 你也值得的，我给你点赞了，你可能忽略了line-height和clear。 - Mr. Alien
24

如果你的图片是标志的一部分，为什么不这样做：

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

使用 CSS 进行样式美化。

将 logo 设为超链接，使其返回主页是最佳实践。

因此，可以这样做：

<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1>
2
根据HTML规范，这是否是“合法”的？ - Pawel Cioch
22

试试这个：

  1. 将两个元素放在一个容器 DIV 中。
  2. 给该容器设置 overflow:auto 属性。
  3. 使用 float:left 将两个元素向左浮动。
  4. 给 H1 元素设置宽度，以便其不占用其父容器的整个宽度。
8

试试这个：

<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
7
只需将img标签作为内容的一部分置于h1标签内即可。
2
@Kermit 这很容易理解，对我很有效！ - Alex Alksne
4
你可以使用一行代码来实现这个功能。
<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
3
按照Billy Moat的建议，您可以将<img>和<h1>标签包裹在一个<div>中，并使用float: left;将图像向左浮动，设置<div>的宽度，然后为h1设置line-height，并使用<div style="clear: float;"></div>来清除浮动元素。 Fiddle
3
我会使用Bootstrap，并将HTML设置为以下内容：
<div class="row">
    <div class="col-md-4">
        <img src="img/logo.png" alt="logo" />
    </div>
    <div class="col-md-8">
        <h1>My website name</h1>
    </div>
</div>
1
这是我的代码，在 header 标签内没有任何 div。我的目标/意图是使用最少的 HTML 标签和 CSS 样式来实现相同的行为。它能够正常工作。

whois.css

.header-img {
    height: 9%;
    width: 15%;
}

header {
    background: dodgerblue;

}

header h1 {
    display: inline;
}

whois.html

<!DOCTYPE html>
<head>
    <title> Javapedia.net WHOIS Lookup </title>
    <link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
    <header>
        <img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
        <h1>WHOIS Lookup</h1>
    </header>
</body>

输出：

输出： Result

0
<head>
<style>
header{
    color: #f4f4f4;
    background-image: url("header-background.jpeg");    
}

header img{
    float: left;
    display: inline-block;
}

header h1{
    font-size: 40px; 
    color: #f4f4f4;
    display: inline-block;
    position: relative;
    padding: 20px 20px 0 0;
    display: inline-block;
}
</style></head>


<header>
<a href="index.html">
    <img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
    <a href="index.html">
    <h1><span> Technocrat</span> Blog</h1></a>
</div></header>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接