如何在HTML段落内插入图片+文本超链接并实现同行显示？

我想让带有图片和文本的.redirect超链接与.text-content段落的文本显示在同一行。之前尝试把超链接插入段落内并添加white-space:nowrap样式，但没有效果。以下是我的当前代码结构：

HTML 代码 #

<div id="readme">
  <div id="title-container">
    <div id="readme-title">
      <b>some text</b>
    </div>
    <img src="...">
  </div>
  <div id="content-container">
    <h1>some text</h1>
    <p class="text-content">some text</p>
    <h1>some text</h1>
    <div class="heading-container">
      <h2>some text</h2>
      <p class="date">some text</p>
    </div>
    <p class="text-content">some text</p>
    <a href="..." class="redirect">
      <span class="redirect-image"></span>
      <span class="read-more">Read more...</span>
    </a>
  </div>
</div>
<div id="preload-redirect-hover"></div>

CSS 代码 #

#readme {
    margin-top: 13.5svh;
    margin-bottom: 15px;
    width: 650px;
    background-color: #353954;
    border: solid;
    border-radius: 10px;
}

#title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: solid;
    font-size: 1em;

    img {
        display: block;
        height: 24px;
    }
}

#content-container {
    padding: 10px 15px;

    h1 {
        width: 100%;
        margin: 0; /* 移除浏览器默认边距 */
        font-size: 1.5em;
        color: #f9b17a;
        border-bottom: solid black 3px;
    }
}

.text-content {
    width: 100%;
    margin: 0; /* 移除浏览器默认边距 */
    padding: 5px 0px; /* 增加行间距 */
    font-size: 1.1em;
    color: #d0daec;
    line-height: 1.3;
}

.heading-container {
    display: flex;
    width: 100%;
    margin: 0px auto;
    padding: 10px 0px;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 2px;

    .date {
        white-space: nowrap;
    }

    h2 {
        width: fit-content;
        font-size: 1.1em;
        margin: 0; /* 移除浏览器默认边距 */
        color: #f0f0F9;
        border: none;
    }

    p {
        margin: 0; /* 移除浏览器默认边距 */
        font-size: 1em;
        color: #f0f0F9;
    }
}

.redirect {
    display: flex;
    width: fit-content;
    text-decoration-color: #f9b17a;

    .redirect-image {
        height: 24px;
        width: 24px;
        background: url("../media/readme/redirect.png");
        background-size: cover;
    }

    .read-more {
        place-content: center;
        color: #f9b17a;
    }
}

.redirect:hover {
    text-decoration-color: white;

    .redirect-image {
        background: url("...");
        background-size: cover;
    }

    .read-more {
        color: white;
    }
}

#preload-redirect-hover {
    width: 0px;
    height: 0px;
    background: url("...");
}

解决方案 #

可以实现，需要调整HTML结构和CSS样式，步骤如下：

1. 调整HTML结构：将.redirect超链接移动到.text-content段落内部，放在段落文本的后面：

<p class="text-content">some text
  <a href="..." class="redirect">
    <span class="redirect-image"></span>
    <span class="read-more">Read more...</span>
  </a>
</p>

2. 修改CSS样式：
   • 将.redirect的display从flex改为inline-flex，让它变为行内级元素，可与段落文本同行显示；
   • 添加vertical-align: middle，确保超链接与段落文本垂直居中对齐；
   • 可选：添加间距样式，优化视觉体验。

修改后的.redirect CSS代码：

.redirect {
    display: inline-flex; /* 改为行内flex布局 */
    vertical-align: middle; /* 垂直居中对齐 */
    margin-left: 8px; /* 可选：增加与段落文本的间距 */
    width: fit-content;
    text-decoration-color: #f9b17a;
    align-items: center; /* 确保内部图片和文本垂直居中 */

    .redirect-image {
        height: 24px;
        width: 24px;
        background: url("../media/readme/redirect.png");
        background-size: cover;
    }

    .read-more {
        place-content: center;
        color: #f9b17a;
        margin-left: 4px; /* 可选：增加图片与文本的间距 */
    }
}

原理说明 #

之前的方法无效，核心原因：

• 原.redirect使用display:flex，默认是块级元素，会独占一行；
• 直接将块级flex元素放入<p>标签内时，浏览器会自动提前闭合<p>，导致超链接被移出段落，无法与文本同行。

改为inline-flex后，元素既保留了flex布局的内部对齐特性，又变为行内级元素，可与段落文本自然显示在同一行。

内容的提问来源于stack exchange，提问作者Denis Tsvetkov