Home/ Questions/Q 6657245
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T01:44:38+00:00

I am trying to format a list of links with some css, I am

  • 0

I am trying to format a list of links with some css, I am having trouble though.

Please look at the image below…

enter image description here

<div class="tag-list">
    <a href="/tag/htaccess" >.htaccess</a>
    <a href="/tag/css-2" >css</a>
    <a href="/tag/database-2" >database</a>
    <a href="/tag/design-pattern">design pattern</a>
    <a href="/tag/mysql" >mysql</a>
    <a href="/tag/pdo" >PDO</a>
    <a href="/tag/php-2">php</a>
    <a href="/tag/server-2">server</a>
    <a href="/tag/web-design">web-design</a>
</div>

the code…

<style>
.tag-list a {

    color: #FFF; 
    text-transform: uppercase !important;
    background:#444;
    padding: 4px 6px 4px 6px;
    -moz-border-radius:3px;
    border-radius:3px;
    font:.8em Helvetica,Arial,sans-serif;
    margin: 1px 0px 0px 0px!important;
    display: block
}
</style>

My goal is to get this list of links to LOOK like that except they should only be the width of the text + padding instead of the full width. I have tried wrapping each link in the div, wrapping the div around the block of links like I have in the code above, If I wrap EACH link in a seperate div and remove the display: block it will show them as the proper width for each link and each on a new line, the only problem with that is that the margin does not work to let me space them out top and bottom.

I’m sure this is a simple fix for someone who knows more about css

jsbin.com link

Thanks for any help

Desired end result something like this…
enter image description here

When adding float: left; clear: both; it makes my other divs show up under it like this…enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    These easiest thing to do would be at add a float property. This essentially shrink wraps elements. I’ve also added a clear property to get them to stack.

    .tag-list a {
    color: #FFF; 
    text-transform: uppercase !important;
    background:#444;
    padding: 4px 6px 4px 6px;
    -moz-border-radius:3px;
    border-radius:3px;
    font:.8em Helvetica,Arial,sans-serif;
    margin: 1px 0px 0px 0px!important;
    display: block;
    float: left;
    clear: both;
}

    I believe this is what you want: http://jsfiddle.net/thnT8/

    Note: I’d encourage you to utilize better markup, such as an unordered list. Not only it is more semantic, but it would allow better hooks and avoid the use of floats.

    UPDATE

    Per the comments and my note above, here’s the code: http://jsfiddle.net/84g6Q/1/

    • 0