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

Posted 2023-02-16

技术标签:

【中文标题】徽标图像和 H1 标题在同一行【英文标题】：Logo image and H1 heading on the same line 【发布时间】：2012-07-26 22:18:14 【问题描述】：

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

我有以下代码：

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

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

【问题讨论】：

【参考方案1】：

在您的 css 文件中执行 img float: left; 和 h1 float: left;

【讨论】：

【参考方案2】：

试试这个：

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

【讨论】：

【参考方案3】：

试试这个：

将两个元素放入容器 DIV 中。为该容器赋予属性 overflow:auto 使用 float:left 将两个元素向左浮动为 H1 指定一个宽度，使其不会占据其父容器的整个宽度。

【讨论】：

【参考方案4】：

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

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

使用 CSS 更好地设置样式。

最好的做法是让您的徽标成为一个超链接，将用户带回主页。

所以你可以这样做：

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

【讨论】：

根据 html 规范是否“合法”？【参考方案5】：

例如（DEMO）：

HTML：

<div class="header">
  <img src="img/logo.png"  />
  <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

【讨论】：

@Speransky 几乎一样.. ;) @SperanskyDanil 你也应该得到它我支持你，你错过了line-height和clear我猜【参考方案6】：

您可以按照 Billy Moat 告诉您的方式进行操作，将您的 <img> 和 <h1> 包裹在 <div> 中并使用 float: left; 将您的图像浮动到左侧，设置 <div> width 然后为您的h1 设置一个line-height 并使用<div style="clear: float;"></div> 清除您的浮动元素。

Fiddle

【讨论】：

【参考方案7】：

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

【讨论】：

@Kermit 这很不言自明，对我有用！【参考方案8】：

检查这个。

 .headerwidth: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.

【讨论】：

【参考方案9】：

我会使用引导程序并将 html 设置为：

<div class="row">
    <div class="col-md-4">
        <img src="img/logo.png"  />
    </div>
    <div class="col-md-8">
        <h1>My website name</h1>
    </div>
</div>

【讨论】：

【参考方案10】：

<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"   ></a>
    <a href="index.html">
    <h1><span> Technocrat</span> Blog</h1></a>
</div></header>

【讨论】：

【参考方案11】：

您只需使用一行代码即可做到这一点..

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

【讨论】：

【参考方案12】：

这是我的代码，标题标签中没有任何 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"  href="https://www.javapedia.net"/>
        <h1>WHOIS Lookup</h1>
    </header>
</body>

输出：

【讨论】：

【参考方案13】：