Html 标志图像和 H1 标题在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11701311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Logo image and H1 heading on the same line
提问by Six Quads
I want to create my first web page but I encountered a problem.
我想创建我的第一个网页，但遇到了问题。
I have the following code:
我有以下代码：
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
I'd like to know how to make the logo and the H1 to be in the same line. Thanks!
我想知道如何使徽标和 H1 在同一行。谢谢！
回答by Danil Speransky
回答by Billy Moat
Try this:
尝试这个：
- Put both elements in a container DIV.
- Give that container the property overflow:auto
- Float both elements to the left using float:left
- Give the H1 a width so that it doesn't take up the full width of it's parent container.
- 将这两个元素放在容器 DIV 中。
- 给那个容器属性 overflow:auto
- 使用 float:left 将两个元素向左浮动
- 给 H1 一个宽度，这样它就不会占据它的父容器的整个宽度。
回答by Moin Zaman
If your image is part of the logo why not do this:
如果您的图像是徽标的一部分，为什么不这样做：
<h1><img src="img/logo.png" alt="logo" /> My website name</h1>
Use CSS to style it better.
使用 CSS 更好地设置样式。
And it is also best practice to make your logo a hyperlink that take the user back to the home page.
最好的做法是使您的徽标成为将用户带回主页的超链接。
So you could do:
所以你可以这样做：
<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1>
回答by M. Ahmad Zafar
Try this:
尝试这个：
<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
回答by Dylan
Just stick the img tag inside the h1 tag as part of the content.
只需将 img 标签作为内容的一部分粘贴在 h1 标签内。
回答by Mr. Alien
You can do it as Billy Moat told you, wrap your <img>and <h1>in a <div>and use float: left;to float your image to the left, set the <div>widthand than set a line-heightfor your h1and use <div style="clear: float;"></div>to clear your floating elements.
您可以按照 Billy Moat 告诉您的方法进行操作，将您的<img>and包裹<h1>在 a 中<div>并用于float: left;将您的图像向左浮动，<div>width然后设置 a 并line-height为您设置 ah1并用于<div style="clear: float;"></div>清除您的浮动元素。
回答by shreya_js
you can do this by using just one line code..
你可以只使用一行代码来做到这一点..
<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
回答by javapedia.net
This is my code without any div within the header tag. My goal/intention is to implement the same behavior with minimal HTML tags and CSS style. It works.
这是我的代码，标题标签中没有任何 div。我的目标/意图是用最少的 HTML 标签和 CSS 样式实现相同的行为。有用。
whois.css
whois.css
.header-img {
height: 9%;
width: 15%;
}
header {
background: dodgerblue;
}
header h1 {
display: inline;
}
whois.html
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>
output:
输出：
回答by Richa Mehta
Steps:
脚步：
- Surround both the elements with a container div.
- Add
overflow:autoto container div. - Add
float:leftto the first element. - Add
position:relative; top: 0.2em; left: 24emto the second element (Top and left values can vary according to you).
- 用容器 div 包围这两个元素。
- 添加
overflow:auto到容器div。 - 添加
float:left到第一个元素。 - 添加
position:relative; top: 0.2em; left: 24em到第二个元素（顶部和左侧的值可能因您而异）。
回答by Saqib Omer
Check this.
检查这个。
.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.
}
