我想创建我的第一个网页,但我遇到了一个问题。
我有以下代码:
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
我想知道如何使徽标和H1在同一行。谢谢!
检查一下。
.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.
}
我使用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>
<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>
overflow:auto
添加到容器div。float:left
添加到第一个元素。position:relative; top: 0.2em; left: 24em
添加到第二个元素(顶部和左侧值可能因您而异)。试试这个:
如果您的图片是徽标的一部分,为什么不这样做:
<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>
试试这个:
<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
只需将img标记粘贴在h1标记内作为内容的一部分。
你可以像Billy Moat告诉你的那样,将你的<img>
和<h1>
包裹在<div>
中并使用float: left;
将你的图像浮动到左边,设置<div>
width
并为你的line-height
设置h1
并使用<div style="clear: float;"></div>
来清除你的漂浮元素。
你可以只使用一行代码来做到这一点..
<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
这是我的代码,在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>
在你的css文件中做img { float: left; }
和h1 {float: left; }