添加指向对齐文本的链接答案

【问题标题】：adding a link to justified text添加指向对齐文本的链接
【发布时间】：2012-12-31 19:46:57
【问题描述】：

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

一个

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->

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

【问题讨论】：

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

标签： html css text hyperlink

【解决方案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;
}

【讨论】：

将宽度设置得很低以测试理由。
@Chris，您的inline 工作正常，但div's 宽度设置为200px，在我的示例中，我将其设置为1000px，因此线路制动不会发生。跨度>
感谢您的回复，但我希望锚在文本中对齐，这样它看起来就像输出中的一个段落。我故意将宽度设置为 200px。强制在 p 元素内发生自动换行。我感觉这是 css 的限制。
@Chris，那你应该清楚地提到它，我只是误解了。 Try this.
谢谢。很抱歉没有具体地问我的问题。

【解决方案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;
}

【讨论】：