72

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

我有以下代码：

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

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

4

13 回答 13

99

例如（演示）：

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;
}

演示

于 2012-07-28T13:19:39.393 回答
22

试试这个：

  1. 将这两个元素放在容器 DIV 中。
  2. 给该容器属性溢出：自动
  3. 使用 float:left 将两个元素都向左浮动
  4. 给 H1 一个宽度，这样它就不会占据其父容器的整个宽度。
于 2012-07-28T13:15:08.133 回答
20

如果您的图像是徽标的一部分，为什么不这样做：

<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>
于 2012-07-28T13:15:15.710 回答
8

试试这个：

<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
于 2012-07-28T13:13:27.307 回答
6

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

于 2013-03-12T18:47:54.793 回答
3

你可以像比利护城河告诉你的那样做，将你的<img>and包裹<h1>在 a 中<div>并使用float: left;将你的图像浮动到左边，设置and 然后为你<div> width设置 a并使用来清除你的浮动元素。line-heighth1<div style="clear: float;"></div>

小提琴

于 2012-07-28T13:24:33.647 回答
3

你可以通过只使用一行代码来做到这一点..

<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
于 2019-01-02T16:27:07.310 回答
2

我会使用引导程序并将 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>
于 2015-08-07T15:32:12.687 回答
1

这是我的代码，标题标签中没有任何 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>

输出： 结果

于 2019-02-16T15:32:18.297 回答
0

在你的css文件中做img { float: left; }和h1 {float: left; }

于 2012-07-28T13:13:21.897 回答
0

检查这个。

 .header{width:100%;
    }

    .header img{ width: 20%; //or whatever width you like to have

    }

    .header h1{

    display:inline; //It will take rest of space which left by logo.
}
于 2014-07-02T10:50:00.083 回答
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>
于 2018-06-20T06:36:52.830 回答
0

脚步：

  1. 用容器 div 包围这两个元素。
  2. 添加overflow:auto到容器 div。
  3. 添加float:left到第一个元素。
  4. 添加position:relative; top: 0.2em; left: 24em到第二个元素（顶部和左侧的值可能因您而异）。
于 2019-06-25T08:21:47.073 回答