Thread: horizontal list

please refer to this link

Horizontal List

i have set a background of #555 for the div containing the list and #ccc for each list items, for the last list item about us based on the amount of padding and margin i have applied there is a small gap left over

my question is if i want the last list item to cover the remaining gap, other than creating a class for the last list item and specifying a different value of padding so that the last list item occupied the remaining gap

is there any other way or creating a separate class for the list item is the only way

please advice.

thanks

The only way I can think is to give the last menu item a different class to the rest of them, with no margin, and then decrease the width of the holding div. Eg:

Change the following in the CSS:

Code:

#topmenu{
    float: left;
    width: 894px;
    height: auto;
    background: #555;
}

#topmenu ul li a{
color: #000;
text-decoration: none;
background: #ccc;
display: block;
padding: 11px 15px 12px 28px;
}

Add the following:

Code:

.menuitem {
 margin: 0 5px 0 0;
}

.lastitem {
 margin: 0;
}

And change the list to:

HTML Code:

<ul>
        <li class="menuitem"><a href="#">Home</a></li>

        <li class="menuitem"><a href="#">Job Search</a></li>
        <li class="menuitem"><a href="#">Advertisers Employers</a></li>
        <li class="menuitem"><a href="#">Immigration Resources</a></li>
        <li class="menuitem"><a href="#">Education Training</a></li>
        <li class="menuitem"><a href="#">Contact Us</a></li>
        <li class="lastitem"><a href="#">About Us</a></li>

      </ul>

Not perfect by a long shot, but it displays how you are wanting it to!

Stu