links are showing up on each line, instead of inline

Question

On a blog detail page, I have a tags section.

The html looks like:

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

For some reason the tags are showing up, each on their own line, instead of being inline.

I know I can create a new style to fix this, I just have to make sure the CSS style is specific enough to target this section.

But how can I force them on the same line?

I tried:

display:inline

but that didn't work.

The 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

Are you sure the td is wide enough to contain both tags side-by-side? Table cells wrap their contents by default (it's one of the reasons people like them).

Answer 2

As others have mentioned, the issue is almost certainly due to the width of the td element, but if you want to force it to not break you could try:

td.tags
{
    white-space: nowrap;
}

Answer 3

Trying to set display: inline is the right idea. My supposition is that you didn't make your selector specific enough to override the display: block set in .entry .entry_meta_bottom a, .entry_individual .entry_meta_bottom a.

Try the following:

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