使用 html 和 css 徽标和 h1 标题出现在同一行

Question

我想创建一个网页，但在使徽标出现在标题附近时遇到了问题。我尝试了以下代码，但这没有产生预期的结果。

我有以下代码：

.line .box .header img {
  float: left;
}

.line .box.header h1 {
  position: relative;
  top: 1px;
  left: 10px;
}

<div class="line">
   <div class="box">
      <div class="s-6 l-2"> 
         <div class="header">
             <img src="img/hrcimg.jpg" alt="logo">
             <h1>United Nations Human Rights Council</h1>
        </div>
      </div>
   </div>
</div>

网站屏幕

Answer 1

您需要增加 .l-2 元素的宽度。

将此元素的宽度设置为 100% 将导致您的问题标题出现的布局。

当达到较低的分辨率时，您需要相应地调整这些样式，以便将结构保持在一个点上。
一旦分辨率达到移动比例，请考虑将它们显示在自己的行中。这可以通过将徽标设置为显示为 block 和 width: 100%; & height: auto; 来完成，此时您还需要取消 float 规则。

Answer 2

所以我做了一些东西，如果我错了，请纠正我 :)

.line img {
  float: left;
}

.line h1 {
  position:relative;
  float:left;
  top: 1px;
  left: 10px;
}

https://jsfiddle.net/3an65dfp/3/

Answer 3

试试这个：

img, h1 {
  display: inline-block;
  vertical-align: middle;
}

<header>
  <img src="http://placehold.it/100x100">
  <h1>COMPANY NAME</h1>
</header>

使用 html 和 css 徽标和 h1 标题出现在同一行

logo and h1 heading appear on same line using html and css

html

css

heading