html - 如何在div中的p标签中只添加 anchor 标签，并在一行中显示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

p 是 block 级元素。您不能将 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