can not expand width of span within list item tag

Question

I am trying to increase the width of the span tag within a list item tag.

Example html;

<li><span>10:00 am</span>Toy Soldiers</li>

CSS for li/span

li span {
  color:#000;
  margin-right:5px;
  background-color:#fff;
  padding:3px;
  text-align:center;
  width:90px;
  display:inline;
}

Live site of what I am having a problem with: http://www.herkimer.edu/hctv

I want the white boxes that contain the time, to be even with eachother, which I am unable to do when trying to set a width on the span in the css.

Maybe I am not allowed to force a width on a span within li, if so, let me know a different way of accomplishing this.

Thank you in advance.

Answer 1

since the display value is inline the width is ignored

try floating the span instead:

li span {
  float: left;
  color:#000;
  margin-right:5px;
  background-color:#fff;
  padding:3px;
  text-align:center;
  width:90px;
}

Answer 2

I think span is not a block element like divs for example and probably this wont allow you to set specific size on them. Try using div.

Answer 3

I noticed that your code actually works in IE as you want it to, but not in Chrome. float:left will help with IE.