将导航中的h1的徽标左对齐

Question

我正在尝试将徽标与h1对齐。但是图像总是在图像之上。我不习惯html和CSS。我在堆栈溢出中尝试了所有答案。在这里我的代码：

 <div class="logo float-left">
<img src="img/gostack.png" id="yourlogo" alt="The only logo">        <h1 class="text-light" ><a href="#intro" class="scrollto"><span><strong>GoStack</strong></span></a></h1>
 </div>

Answer 1

您尚未添加向左浮动的类（css）。我在这里添加了css代码

HTML

 <div class="cust-container">
<img src="img/gostack.png" id="yourlogo" alt="The only logo" class='iconDetails'>
    <h1 class="text-light" ><a href="#intro" class="scrollto"><span><strong>GoStack</strong></span></a></h1>
</div>

CSS

.cust-container {
width:100%;
height:auto;
padding:1%;
}

.iconDetails {
 margin-left:2%;
 float:left; 
 height:40px;
 width:40px;    
 } 

h1 {
  margin:0px;
}

这里是链接https://jsfiddle.net/Arpit09/fwxjvy1d/4/

Answer 2

[请允许我们查看CSS文件，以便我们查看用于位置的代码。

Answer 3

在HTML中，块元素展开以填充所有可用的水平空间，从而迫使所有其他元素在负责任元素的上方或下方流动。要解决此问题，您可以更改元素的显示属性，也可以使用CSS Grid或Flex之类的东西。我建议只将display: flex添加到您的.logo类中>

.logo{
  display: flex;
}
<div class="logo float-left">
<img src="img/gostack.png" id="yourlogo" alt="The only logo"><h1 class="text-light" ><a href="#intro" class="scrollto"><span><strong>GoStack</strong></span></a></h1>
</div>