can not expand width of span within list item tag

I am trying to increa开发者_如何转开发se 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.

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;
}

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.

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

We can increase its width. We have to add style in it with display:inline-block and then width.

<li><span style="display:inline-block;width:90px">10:00 am</span>Toy Soldiers</li>

Another way to Solve this is ver simple

<li><span>10:00 am</span>&nbsp;&nbsp;&nbsp;Toy Soldiers</li>

this will add space between span and li element