Issue
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?
Solution
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>
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>
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>
Answered By - Kareem Dabbeet
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.