我有一个应该内联显示的链接列表。 问题是我不希望文本在链接中间换行。如果它需要换行,它应该只在 链接之间进行换行。
因此,我已将 white-space:nowrap;
属性添加到我的链接中。但是生成的链接列表 never 换行并从我的 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;
}
关于html - 在 nowraps 之间换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10558391/