1

インラインで表示する必要のあるリンクのリストがあります。問題は、テキストがリンクの途中で折り返されたくないということです。折り返す必要がある場合は、リンク間でのみ行う必要があります。

white-space:nowrap;そのため、リンクにプロパティを追加しました。しかし、結果として得られるリンクのリストが折り返されることはなく、箱から出してしまいdivます。

リストをリンク間で折り返す方法はありますか？ありがとうございました！

<div class="box">
<p>
<a href="mylink1" class="mytag">Hello there</a>
<a href="mylink2" class="mytag">Hello you</a>
<a href="mylink3" class="mytag">Hello people</a>
<a href="mylink4" class="mytag">Hello world</a>
</p>
</div>

関連するCSSは次のとおりです。

.mytag,.mytag:link,.mytag:visited{
  background-color:#FFF5CA;
  border:1px solid #FFE5B5;
  color:#222;
  padding:2px 5px;
  margin-right:5px;
  white-space:nowrap;
}
.mytag:hover{
  background-color:#FFE5B5;
}
4

2 に答える 2

1

基本的に、white-space:nowrap;それが想定されていることを正確に実行しており、要素を複数の行に分割しているわけではありません。

実際に探しているのは、リンクが次の行に折り返されることなく、リンクを1行に表示することです。したがって、displayプロパティをとして使用しますinline-block。

.mytag,.mytag:link,.mytag:visited{
  background-color:#FFF5CA;
  border:1px solid #FFE5B5;
  color:#222;
  padding:2px 5px;
  margin-right:5px;
  display: inline-block;
}
于 2012-05-11T20:53:48.020 に答える
0

ここには不思議なことは何もありません。コンテナに特定の幅がある場合は、リンク間を自動的にラップする必要があります：http: //jsfiddle.net/RZfd2/

于 2012-05-11T20:47:29.290 に答える