固定宽度 UL 内的标签列表 <li> 存在问题

Question

我在将标签列表放入 wordpress 博客时遇到了一个小问题！

我的标签列表包含在一个固定宽度的 UL 中。

我想避免像“人力资源”标签那样的自动换行...

我希望整个标签放在第二行。

我正在像这样使用 the_tags 函数：

<?php the_tags('<ul id="my-tags"><li class="cute-tag">','</li><li class="cute-tag">','</li></ul>'); ?>

我的 CSS

#my-tags{
margin:0;
width:350px;
float:left;
}

#my-tags li {
display: inline;
font-family: Verdana, Arial,sans-serif;
text-transform:uppercase;
font-size: 10px;
margin-right:5px;
font-weight:600;
padding:4px;
background:#2d0e0f;
list-style-type: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#my-tags li  a{
color:#FFFFFF;
text-transform:uppercase;
font-weight:100;
font-style: normal;
}

#my-tags li  a:hover{
text-decoration:none;
}

提前感谢您的宝贵时间。

干杯，

Jk_

Answer 1

您可以使用white-space css 规则阻止标签换行：

#my-tags li {
    ...
    white-space:nowrap;
}

更新：我看不出上述方法不起作用的任何原因，但您是否尝试将其应用于锚点？

#my-tags li a {
    ...
    white-space:nowrap;
}

Answer 2

您的问题始于您对列表的 css 定义..

我为你设置了一个更正的小提琴：http://jsfiddle.net/tobiasmay/72q9n/

在你更正这些之后，no-wrap 应该可以工作了。