我想知道是否可以无缝添加指向合理文本的链接。我希望该链接在文本内被证明是正确的,并保持其位置。所需的输出将看起来像一个段落。到目前为止,我已经尝试了两种方法。



的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;
}


10-05 20:39
查看更多