Question

我想知道我是否可以无缝地添加到合理文本的链接。我希望链接在文本中合理并保持其立场。所需的输出看起来像一个段落。到目前为止，我尝试了两种方法。

一个

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可以吗？

2

当我把链接放在段落中时，它似乎随机地将它插入文本节点之间的实际位置附近。可以将链接视为一个单词吗？

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-＆gt;＆lt; -link”

对齐

我想如果这两个选项中哪个更好，我只想知道为什么链接不会与文本节点的位置对齐。 “link-＆gt;”，“＆lt; -link”

Answer 1

您的代码适用于inline，但在您的css中

div {
    width: 200px;
}

并且所有其他元素都位于div内部，因此它是导致换行符的div，如果您设置div的宽度，那么它将显示在一行中，这是（内联）现在正在工作。

Example

更新： Also you may try this

* {
    margin: 0;
    padding: 0;
  }
div {
  width: 200px;
  text-align: justify;
}
p{
    display: inline;
}
a{
  float:left;
}

Answer 2

像Heera提到的那样。

div {
width: 200px;
}

导致断行，因为它可能不够宽。你需要增加它。

如果您希望链接与文本对齐而不是像这样。

<div>
<p>This is a chunk of text. This is a chunkof  text. This is a chunk of text.
<a href="#"> This is a link.</a></p>
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>

另外，您必须为链接和段落标记添加一个类，以使它们浮动并显示内联。只做上述方法会更简单。

如果你宁愿这样做，那么应该这样做

<div>
<p class="firstP">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> 
<div class="breaker"></div>
<p>This is a chunk of text. This is a chunk of text. This is a chunk of text.</p>
</div>

p.firstP { 
float: left; 
display: inline-block; 
}

div a  { 
float: left; 
display: inline-block; 
} 

.breaker {
clear: both;
}

添加到对齐文本的链接

2 个答案: