我有一个应该在线显示的链接列表。
问题是我不希望文本包含在链接的中间。如果需要包装,则仅应在链接之间进行包装。

因此,我已将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;
}

最佳答案

基本上,white-space:nowrap;完全按照预期的方式运行,并且不会将元素分成多行。

您真正要寻找的是将链接显示在一行上,而链接不缠绕在下一行上。因此,将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;
}

10-07 21:18