0

正当化されたテキストへのリンクをシームレスに追加できるかどうか疑問に思いました。リンクをテキスト内で正当化し、その位置を維持したいと思います。目的の出力は1段落のようになります。これまでに2つの方法を試しました。

1

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

リンクを段落に入れると、テキストノード間の実際の場所の近くにランダムに挿入されているようです。リンクを1つの単語として扱っている可能性がありますか？

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」と一致しません

これが2つのオプションの中で優れている場合は、リンクがテキストノードの頭韻的な位置と一致しない理由を知りたいと思います。「リンク->」、「<-リンク」

4

2 に答える 2

1

あなたのコードは本来あるべきように機能してinlineいますが、あなたの中cssには

div {
    width: 200px;
}

他のすべての要素はその中にあるdivので、改行の原因はdivです。幅を設定するとdiv、1行に表示され、現在（インラインで）機能しています。

例。

更新： また、これを試すことができます

* {
    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 に答える