Question

在博客详情页面上，我有一个标签部分。

html看起来像：

<td class="tags">
<a href="">tag1></a>, <a href="">tag2</a>
</td>

由于某种原因，标签会显示，每个标签都在自己的行上，而不是内联。

我知道我可以创建一个新的样式来解决这个问题，我只需要确保CSS样式足够具体来定位这个部分。

但我怎么能强迫他们在同一条线上呢？

我试过了：

display:inline

但这没效果。

css：

.entry .entry_meta_bottom a,
.entry_individual .entry_meta_bottom a {
    display: block;
    font-size: 0.9em;
    line-height: 1.75em;
    background-position: 0 60%;
    background-repeat: no-repeat;
    text-decoration: none;
    margin-right: 10px; 
}
.entry .entry_meta_bottom td.tags,
.entry_individual .entry_meta_bottom td.tags 
{       
    background-image:url("../icon_tags.gif");
    background-repeat: no-repeat;
    padding:0 0 0 25px; 

}

Answer 1

尝试设置display: inline是正确的想法。我的假设是您没有使选择器具体到足以覆盖display: block中的.entry .entry_meta_bottom a, .entry_individual .entry_meta_bottom a设置。

尝试以下方法：

.entry .entry_meta_bottom td.tags a,
.entry_individual .entry_meta_bottom td.tags a {
    display: inline;
}

Answer 2

您确定td足够宽，可以并排包含两个标签吗？表格单元格默认包装其内容（这是人们喜欢它们的原因之一）。

Answer 3

正如其他人所提到的，问题几乎肯定是由td元素的宽度引起的，但是如果你想强制它不破坏你可以尝试：

td.tags
{
    white-space: nowrap;
}

链接显示在每一行，而不是内联

3 个答案: