时间戳

首页 > 解决方案 > 如何修复同一行中两个块的文本缩进

html - 如何修复同一行中两个块的文本缩进

问题描述

我偶然发现了缩进的问题。如果您查看我网站的这一部分：

我展示了两张图片，并将它们与“作者”、“标题”和“虚拟描述”对齐。

这是我的 HTML 标记：

<img class="book-covers" src="../images/BookCovers/books.jpg" alt="Book">        
            <span>
            </span>
            <p class="text-book">
                <br>
                <br>
                Author<br>
                Titel<br>
                Dummy description
            </p>

            <img class="book-covers" src="../images/BookCovers/HowToReadABOOK.jpg" alt="Book">        
            <span>
            </span>
            <p class="text-book">
                author<br>
                Titel<br>
                Dummy description
            </p>

这是我的 CSS 代码：

.text-book
{
  display: inline-block;
  margin: 50px 15px;
  font-size: 90%;
  width: 450px;
}

.book-covers
{
  height: 300px;
  width: 200px;
  vertical-align: top;
  margin-top: 50px;
  margin-left: 12%;
}

正如您在我的 HTML 代码中看到的那样，我在您遇到<br> <br> 的第一个插入下方。<p class="text-book">

我的问题是：与“如何阅读一本书”的第二张图片对齐的文本也出于某种原因换行，这是我不想要的。

谁能告诉我我做错了什么以及如何解决这个问题？

标签： htmlcss

解决方案

推荐阅读