CODEWITHSUNDEEP
htmlcsshref
ddg
ddg

Reputation: 1098

How to inline an href?

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?

Upvotes: 1

Views: 3337

Answers (3)

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

  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>

  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>

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

Upvotes: 5

Maik Lowrey
Maik Lowrey

Reputation: 17566

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>

Upvotes: 1

3n6in33r
3n6in33r

Reputation: 95

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

Upvotes: 3

Related Questions