代码之家 › 专栏 › 技术社区 › Brad

无法在列表项标记内展开跨度宽度

css html

Brad · 技术社区 · 15 年前

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

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中设置跨度宽度时,这是无法做到的。

也许我不允许在李的跨度上施加宽度,如果允许,请告诉我实现这一点的不同方法。

提前谢谢。

5 回复 | 直到 8 年前

hunter 15 年前

因为显示值是内联的,所以宽度被忽略。

尝试浮动跨度:

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

Lachezar 15 年前

例如,我认为SPAN不是像DIV这样的块元素,这可能不允许您在它们上面设置特定的大小。尝试使用DIV。

enforge 15 年前

我注意到你的代码实际上是在IE中按你想要的方式工作的,但不是在Chrome中。浮动:左移有助于IE。

NightOwl888 Jabrwoky 8 年前

我们可以增加它的宽度。我们得加上样式 display:inline-block 然后 width .

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

-2

Nouman Saleem 8 年前

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

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

这将增加跨度和li元素之间的空间

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前