时间戳

首页 > 解决方案 > 跨度标签在文本图像或文本组合中不起作用

html - 跨度标签在文本图像或文本组合中不起作用

问题描述

我有一段代码，似乎我的代码不关心我的span标签，我不知道是我的浏览器（Chromium Edge）还是我的代码的问题，我所有的网站似乎都有这个问题. 这也仅发生在文本图像组合或仅文本中，而不是图像中。片段将帮助您更好地理解。这意味着每当我想显示一个完全像这样的图像时： text 但是我的 span 所做的是： text 我希望能更好地理解

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <span>
            <p>This is text</p>
        </span>
        <span>
            <p>It doesn't work with spans.</p>
        </span>
        <span>
            <img src="https://images.unsplash.com/photo-1603381616642-42b585a184b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
                alt="Image #1">
        </span>
        <span>
            <img src="https://images.unsplash.com/photo-1603132852827-5857c966512e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
                alt="Image #2">
        </span>
        <br>
        <br>
        <br>
        <br>
        <span>
            <p>This is a image text combination</p>
        </span>
        <span>
            <img src="https://images.unsplash.com/photo-1599993771158-370837d1dba8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
                alt="ImageText">
        </span>
    </body>

    </html>

由于帖子区域的大小，图像可能看起来处于 div 状态。展开以获得准确的结果。

标签： html

解决方案

您可以使用 CSS 属性display: inline-block使一组组件内联。这是一个简单的例子。由于您使用的图像有点大，因此它在浏览器中单独显示在一行中。您可以通过为图像定义一个width和/或height来解决此问题。

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <p style="display:inline-block">This is text</p>
        <p style="display:inline-block">It doesn't work with spans.</p>
        <img src="https://images.unsplash.com/photo-1603381616642-42b585a184b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image #1" style="display:inline-block; width:100px">
        <img src="https://images.unsplash.com/photo-1603132852827-5857c966512e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image #2" style="display:inline-block; width:100px">
    </body>

    </html>

我仍然不清楚你想在这里用跨度实现什么。如果你想<p>用一个标签包围一个特定的<image>标签，我建议你使用<div>s 而不是 spans。

推荐阅读