0

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

一

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-> <-link”对齐

我想如果这是两个选项中更好的一个，我只想知道为什么链接不会与文本节点的位置对齐。“链接->”、“<-链接”

4

2 回答 2

1

您的代码正在按应有的方式工作，inline但在您css的代码中

div {
    width: 200px;
}

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

例子。

更新： 你也可以试试这个

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

​</p>

于 2012-12-31T19:53:46.647 回答
0

就像赫拉提到的那样。

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;
}
于 2012-12-31T19:52:03.260 回答