如何使内嵌标签<a>在块标签后</a>内联<a>显示</a> <p> <a>？</a>

Question

I need help with HTML, I don't know how to do this. So I've got:

<p>Text text text Text text text Text text text Text text text Text text text Text text text Text text text Text text text Text text text <a href="#">Link</a></p>

So it will show:

> Text text text Text text text Text text text Text text text Text text > text Text text text Text text text Text text text Text text text > **Link**

How can I make this link be next to the text but not in the <p> tag? Is it possible?

Answer 1

Just add display:inline; to your p tag like this:

p {
    display:inline;
}

Or if you don't want to change every p tag, then add a class and add the property to that like this:

 p.sameLine {display:inline;} 

 <p class="sameLine">Text text text Text text text Text text text Text text text Text text text Text text text Text text text</p> <a href="#">Link</a> 

jsFiddle: http://jsfiddle.net/AndrewL32/65sf2f66/60/

Answer 2

Try this:

 <p style="display:inline-block">paragraph</p> <a href="#">anchor</a> 

More information on the display property

Answer 3

请试试这个：

<p style="display:inline">Text text text Text text text Text text text Text text text Text text text Text text text Text text text Text text text Text text text </p> <a href="#">Link</a>

Answer 4

If you try

<p>
    <span class="normal-text">Lots of Texts</span>
    <a href="#">Link</a>
</p>

in your HTML file and

.normal-text
{
    max-height: 50px;
}

in a corresponding .css file, then you will be able to apply css styling

• <p> to style everything in the paragraph, text and link included
• .normal-text to style everything in the normal, non-linked text
• <a> to style everything to do with the link / anchor.

Please see http://www.w3schools.com/cssref/pr_dim_max-height.asp for information on max-height and a useful example.