无法扩展列表项标记内的跨度宽度

Question

我正在尝试在列表项标记中增加span标记的宽度。

示例html;

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

li / span的CSS

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

我遇到问题的实时网站：http://www.herkimer.edu/hctv

我希望包含时间的白框与其他人一样，在尝试在css中设置宽度时我无法做到这一点。

也许我不允许在李的范围内强制宽度，如果是这样，让我知道一种不同的方法来实现这一点。

提前谢谢。

Answer 1

因为显示值是内联的，所以忽略宽度

尝试浮动跨度：

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

Answer 2

我认为span不是像div这样的块元素，可能这不允许你在它们上设置特定的大小。尝试使用div。

Answer 3

我注意到您的代码实际上可以在IE中使用，但不能在Chrome中使用。 float：left将有助于IE。

Answer 4

我们可以增加它的宽度。我们必须使用display:inline-block然后width添加样式。

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

Answer 5

解决这个问题的另一种方法是简单的

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

这将在span和li元素之间添加空格