1

I have a list of links that should be displayed inline. The thing is I do not want the text to wrap in the middle of links. If it needs to wrap, it should only do so between links.

I have therefore added the white-space:nowrap; property to my link. But the resulting list of links never wraps and gets out of my div box.

Any idea how I can get my list to wrap between the links? Thank you!

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

The relevant CSS is just:

.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;正在做它应该做的事情，而不是将元素分成多行。

您实际上正在寻找的是在单行上显示链接，而不会将链接换行到下一行。因此，使用display属性 as 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

There isn't anything mysterious here - they should automatically wrap between links if your container has a specific widhth: http://jsfiddle.net/RZfd2/

于 2012-05-11T20:47:29.290 回答