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

试试这个：

将两个元素放在容器DIV中。
为该容器提供属性overflow：auto
使用float：left
给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标记内作为内容的一部分。

Answer 6

你可以像Billy Moat告诉你的那样，将<img>和<h1>包裹在<div>中并使用float: left;将图片浮动到左侧，设置<div> width而不是为line-height设置h1并使用<div style="clear: float;"></div>清除浮动元素。

<强> Fiddle

Answer 7

您可以只使用一行代码来完成此操作。

textboxheight.txt

Answer 8

在您的css文件中

执行img { float: left; }和h1 {float: left; }

Answer 9

检查一下。

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

Answer 10

我使用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>

Answer 11

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">One</p>
<p id="p2">Two</p>
<p id="p3">Three</p>
<p id="p4">Four</p>
<button id="button1">Show me more</button>

Answer 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" alt="javapedia.net" href="https://www.javapedia.net"/>
        <h1>WHOIS Lookup</h1>
    </header>
</body>

输出：

Answer 13

步骤：

用容器div包围这两个元素。
将overflow:auto添加到容器div。
将float:left添加到第一个元素。
在第二个元素中添加position:relative; top: 0.2em; left: 24em（顶部和左侧的值可能会因您而异）。

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

13 个答案:

步骤：