CODEWITHSUNDEEP
htmlcss
Blankman
Blankman

Reputation: 266940

links are showing up on each line, instead of inline

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; 

}

Upvotes: 2

Views: 64

Answers (3)

Scott Cranfill
Scott Cranfill

Reputation: 1056

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

Upvotes: 3

mwcz
mwcz

Reputation: 9301

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

Upvotes: 0

Hank Gay
Hank Gay

Reputation: 71939

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).

Upvotes: 0

Related Questions