I have something that looks like:

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

When displayed, the href link is always on a newline by itself. How can I make it stay "attached" to the previous text?

CodePudding user response：

1- first option:

you can use display: inline-block for both, a tag, and the element before

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

2- second option:

add the anchor tag inside text tag before it

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

2- third option:

wrap them in 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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Something you may consider trying is the adding the CSS "display" property to your element: display: inline-block;

CodePudding user response：

You use Tailwind? Then call the class inline. It is the same like: 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>