如何内联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 链接始终单独换行。我怎样才能使它保持“附加”到前面的文本？

Answer 1

1. 第一个选项：

   您可以display: inline-block同时用于a标签和之前的元素

       .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>

2. 第二个选项：

   在文本标签内添加锚标签之前

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

3. 第三个选项：

   将它们包裹在柔性材料中

       .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>