如何内联一个href？

Question

我有一些东西看起来像：

<ContentBlock
    className={'text-gray-300 mt-4'}
>
    Blah blah blah, blah BLAH, blah
    <a href="foo.bar" 
       className={'underline text-gray-200 hover:text-blue-300'}>
          foo bar
    </a>
</ContentBlock>

显示时，href link 总是单独换行。我怎样才能让它与之前的文本保持“联系”？

Answer 1

您可以考虑尝试将 CSS“显示”属性添加到您的元素：display: inline-block;

Answer 2

第一个选项：

您可以对 a 标记和

之前的元素使用 display: inline-block

    .inline-block {
      display: inline-block;
    }

    <p class="inline-block"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, !</p>
    <a href="" class="inline-block"> learn more</a>

第二个选项：

在它前面的文本标签内添加锚标签

    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, !
      <a href=""> learn more</a>
    </p>

第三个选项：

将它们包裹在 flex

    .flex {
      display: flex;
      align-items: center
    }

    <div class="flex">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, !</p>
      <a href=""> learn more</a>
    </div>

Answer 3

您使用 Tailwind？然后调用 class 内联。就像：display: inline-block;

<ContentBlock
    className={'text-gray-300 mt-4'}
>
    Blah blah blah, blah BLAH, blah
    <a href="foo.bar" 
       className={'inline underline text-gray-200 hover:text-blue-300'}>
          foo bar
    </a>
</ContentBlock>

如何内联一个href？

How to inline an href?

html

css

href