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

在博客的详细信息页面上，我有一个标签部分。链接显示在每行，而不是内联

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

}

来源

2010-03-03 Blankman

你有任何其他样式默认“A”级？另外，你对'标签'类有什么风格？ – animuson 2010-03-03 20:21:14

我们必须看到更多的代码。或者，因为这是一个表格单元格，可能是因为列太窄，而且只是获得了包装效果。尝试扩大表格，看看是否有帮助。 – Robusto 2010-03-03 20:24:20

将CSS添加到上面的问题。 – Blankman 2010-03-03 20:26:34

尝试设置display: inline是正确的想法。我的假设是，你没有使你的选择器具有足够的特性来覆盖.entry .entry_meta_bottom a, .entry_individual .entry_meta_bottom a中设置的display: block。

尝试以下操作：

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

来源

2010-03-03 20:32:10

就是这样，再特别的！ – Blankman 2010-03-03 21:03:45

我不得不通过反复试验来了解关于特异性的很多难题。我很高兴能够分享我在这样的网站上学到的东西:) – 2010-03-03 21:10:06

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

来源

2010-03-03 20:23:33

的HTML那么上面的内容（博客文本）是可见的，它比标签列表更广泛。我在表中添加了width = 500，没有区别，实际上它只是将标签部分向右移动，但它们仍然在自己的行上。 – Blankman 2010-03-03 20:28:54

正如其他人所说，这个问题几乎可以肯定，由于td元素的宽度，但如果你想迫使它不会破坏你可以尝试：

td.tags 
{ 
    white-space: nowrap; 
}

来源

2010-03-03 20:27:02 mwcz

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

回答

相关问题