How can I fill the remaining space when dealing with an inline ul?

Question

I used this CSS to make my ULs look fancy

ul, li
{
  padding: 0px;
  margin-left: 0px;
  margin-bottom: 0px;
  display: inline;
}

li
{
  border: solid 1px #333333;
  margin-right: 5px;
  padding: 2px;
  background-color: #222222;
  color: #999999;
}

I'd like to have a final, empty list item that has the same graphical style fill up the remaining space on the inline. Something like

[item A] [item B] [item C] [------big empty one----------]

Is is possible to figure out how much space you have left? Could you set one of the list items to have width 100% or something?

Thanks,

Answer 1

You could use a background colour/image on the UL, and make the UL and LIs the same height to give this effect