HTML 源页面上出现的换行符

Question

呈现不在我的源代码中的 DOM 时出现换行符，将内容推错位置。为什么？我该如何解决？这是我的代码：

<div class="float-left" style="position:relative;left:15px">
    <h2 style="color:#323C41;margin-bottom:0;">A New Hope</h2>
    <p style="color:#323C41;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula nisl at hendrerit ornare. Ut non ipsum urna. Praesent non.</p>
</div>

当我检查 Chrome 中的页面时，它显示如下：

<div class="d-flex justify-content-center align-items-center bg-grey-kr fg-navy-kr secondary">
    <br>
    <img src="/images/testers/rebels.png" alt="Rebel symbol" class="rebel"><br>    <div class="float-left" style="position:relative;left:15px">
    <br>        
    <h2 style="color:#323C41;margin-bottom:0;">A New Hope</h2>
    <br>        
    <p style="color:#323C41;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula nisl at hendrerit ornare. Ut non ipsum urna. Praesent non.</p>
    <br>    
</div>

这使我的页面看起来像这样：

当我删除换行符时，我看到了预期的结果：

感谢您查看此内容。我搜索了一上午，找不到答案。如果很明显，请提前道歉！

Answer 1

问题是从 Hexo 工具直接将 HTML 代码添加到我的 "new page" 中。 Hexo 是一个博客工具，可以将 Markdown 文件编译成静态的动态页面。每当我按回车键在新行上编写代码时，Markdown 就好像我在文本编辑器上按回车键一样。将代码全部移动到一行解决了这个问题。

无法在网上找到答案，但当我找到答案后，我想 post 将它放在这里以供查看。

HTML 源页面上出现的换行符

Line breaks appearing on page that aren't in HTML source

html

markdown

hexo

bootstrap-4