links are showing up on each line, instead of inline


Tags: html,css

Problem :

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; 

}


Solution :

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

    CSS Howto..

    How to expand wrapper when content is more?(with CSS)

    How to rotate an image back and forth with JavaScript

    how to make css contents like boxes, text as center?

    How to Keep CSS Background Image on top of all divs(breadcrumb arrows)?

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

    How do I make circles within a larger circle, and text within the center of all the circles, in CSS?

    How to move an image up and down smoothly with CSS?

    how to remove a TR which have a TD that contain specific text

    how to CSS select all th cells, except the last one on IE7/8?

    How to achieve layout goal - Two Column

    How can I change the style of thumbnails?

    How can I get the first and last name labels to align under the corresponding input forms?

    How to get inline style that was overridden by CSS !important using JavaScript

    Css Sub menu needed to show on the left not on the right of the menu

    CSS: How to bring background image to the front?

    How to use CSS to align a custom check box with its label?

    how to replace a link name text

    Thymeleaf: how to use conditionals to add/remove dynamically a CSS class

    How to use bootstrap css tables to display data from MySQL tables?

    How to handle CSS with meteor?

    Linked text a few lines below hamburger menu is not showing as linkified, but shows fine further down

    How can I fill a fixed-size
    with a variable-size

    ?

    css how to align absolute positioned child element to the right of fluid width parent

    How to implement CSS sprite background into existing Javascript variable?

    How to auto adjust margin to Auto center vertical & horizontal using jQuery and CSS margin

    How do you organize your template structure in CodeIgniter?

    How create a grid in which a variable number of squares automatically resize to fit a space?

    How to change the css of a div using the click function on jQuery, but however twice instead of once?

    How to force IE to place two div boxes next to each other in it's browser window?

    Rails How to include a scss file in a specific erb view? [duplicate]