我想知道是否可以无缝添加指向合理文本的链接。我希望该链接在文本内被证明是正确的,并保持其位置。所需的输出将看起来像一个段落。到目前为止,我已经尝试了两种方法。
一
的html:
<div>
<p>This is a chunk of text. This is a chunkof text. This is a chunk of text.</p>
<a href="#"> This is a link.</a>
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>
css:
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
}
p, a {
position: relative;
float: left;
text-align: justify;
display: inline;
}
结果是:
一段文本,一个换行符,链接,一个换行符,然后是最后一块文本。
我想无缝地将链接添加到对齐的文本。 CSS就能做到吗?
二
当我将链接放在段落中时,似乎将其随机插入到文本节点之间的实际位置附近。可以将链接视为一个单词吗?
html:
<div>
<p>This is a chunk of text. This is a chunkof text. link-><a href="#"> This is a link.</a><-link This is a chunk of text.</p>
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>
在输出中,链接未与“ link->
我想如果这是两个选项中最好的一个,我只想知道为什么链接不与文本节点相对应的位置对齐。 “链接->”,“
最佳答案
您的代码可以正常运行,但在inline
中
div {
width: 200px;
}
并且所有其他元素都在该
css
内,因此是由div引起的换行符,如果您将div
的宽度设置得更大,则它将显示在一行中,该行现在(内联)起作用。Example。
更新:Also you may try this
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
text-align: justify;
}
p{
display: inline;
}
a{
float:left;
}