如何仅将锚标记添加到div中的p标记并在一行中显示p标记文本？

Question

div元素有一个背景图片。图片说明中有一个p标记。但是，我不希望整个div元素是超链接，只是p标记内的文本。

当前代码： HTML

<div id="p1" class="trp"><a href="#"><p>Jacob A.</p></a></div>
<div id="p2" class="trp"><p>In Jo Sung</p></div>
<div id="p3" class="trp"><p>Kim Min Ho</p></div>

CSS

.trp{
    height: 20px;
    width: 20px; 
    margin: 1%;   
    border: 1px solid black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

.trp p
{
    text-align:right;
    margin:0px 0px 0px 25px;
    display: inline-block;
    font-size:8pt;
    font-family:Lucida Sans;
    padding:2px;
}

此外，p标签文本显示为两行而不是一行，尽管有足够的空间。

Answer 1

根据您的描述，您可以尝试以下方法：

<div id="p1" class="trp"><p><a href="#">Jacob A.</a></p></div>

希望这可能会有所帮助。最好的问候，

Answer 2

您好我认为在HTML 5中您可以在标记内使用<a> <p>。但是html 4.x和xhtml 1.x你不能。

试试这个

<div id="p1" class="trp"><p><a href="#">Jacob A.</a></p></div>

制作<p> or <a> display:block。

Answer 3

p是块级元素。您无法将paragraph包裹在hyperlink内。这是HTML4标准，尽管它在HTML5中被忽略。

正确的代码：

<div id="p1" class="trp"><p><a href="#">Jacob A.</a></p></div>
<div id="p2" class="trp"><p>In Jo Sung</p></div>
<div id="p3" class="trp"><p>Kim Min Ho</p></div>

JSfiddle