CODEWITHSUNDEEP
css
user580523
user580523

Reputation:

CSS List Question

I'm looking for a quick cross browser solution to my need for auto margins.

I have a simple list:

<ul>
     <li>text</li>
     <li>text</li>
     <li class="possibly_last">text</li>
</ul>

With a width of 600px.

What I need is CSS code to make sure there is an even margin between each <li>.

So that they stretch across the full 600px evenly.

I may need to as a "last" class, but that's fine.

I just want a browser friendly way to do this.

Any help would be great, Thanks!

Upvotes: 1

Views: 109

Answers (4)

Ivan Ivanic
Ivan Ivanic

Reputation: 3044

I think this can't be done with margins, I suggest you this solution: http://jsfiddle.net/wY5t6/ css:

ul li {
    margin: 0;
    display: block;
    float: left;
    width: 200px;
    text-align: center;
}
ul {
    width: 600px;
    overflow:hidden;
}

If you need to set padding, background etc on list item than you can do it this way: http://jsfiddle.net/wY5t6/1/ HTML:

<ul>
    <li><span>text</span></li>
    <li><span>text</span></li>
    <li class="possibly_last"><span>text</span></li>
</ul>

CSS:

ul li {
    margin: 0;
    display: block;
    float: left;
    width: 200px;
    text-align: center;
}
ul {
    border: 1px green dotted;
    width: 600px;
    overflow:hidden;
}

li span {
    background: yellow;
    padding: 5px;
}

Upvotes: 0

David Rhoden
David Rhoden

Reputation: 952

Are you intending to float the list items so they stretch horizontally to fill the ul that way? if so, something like

<style type="text/css" media="screen">
    ul {width: 600px;}
    li {display: inline; float: left; width: 33%;}
</style>

would work.

Upvotes: 0

Bojangles
Bojangles

Reputation: 101473

I take it you mean you don't want a margin after the last li? In that case, use the CSS :last-child selector:

ul li
{
    margin-right: 10px;
    width: 190px;       // 190px = 200px - margin width
    display: inline-block;
    zoom: 1;
    *display: inline;
}

ul li:last-child
{
    margin-right: 0px;
}

Please note that this will NOT work in any internet explorer except IE9. Sorry :-(

As a fix, you could use JavaScript (notably jQuery) to edit the CSS of the last child.

An example here: http://jsfiddle.net/WtLAm/2/

Upvotes: 0

Jhourlad Estrella
Jhourlad Estrella

Reputation: 3670

Try this:

<style>
li {
  display: block;
  float: left;
  width: 32%;
}
</style>

If that does not work, try this:

<style>
li {
  display: block;
  float: left;
  width: 200px; // or less
}
</style>

Upvotes: 1

Related Questions