一个并不复杂的html/css问题

旧城的骁珖 发布于 2012/04/02 20:34
阅读 217
收藏 0

有这样一个场景,html结构如下:

<ul>
<li><span></span><span></span><span></span><span></span><span>我出现在哪里?</span></li>
</ul>

 css代码如下:

ul { list-style: none; }
span { float: left; width: 100px; }

很明显这样的代码下,前面几个span标签并没有如我们所愿。那该如何办呢。前端工程师们....

加载中
2
qycms_cn
qycms_cn

span是行内元素,没有具体的外形,

span { float: left; width: 100px; }

你这样定义span的width,是不是好菜啊?菜鸟才这样写的吧!!!!!!!!

如果你硬要span,要把它变成块元素,加上display:block属性吧.

旧城的骁珖
旧城的骁珖
你out了,加上float属性,就已经具备display:block属性了,呵
0
牛牛牛牛
牛牛牛牛

<span>&nbsp;</span> 不修改CSS和标签

0
旧城的骁珖
旧城的骁珖

引用来自“牛牛牛牛”的答案

&nbsp;?
似乎不完美哦
0
牛牛牛牛
牛牛牛牛
span {border: 1px solid white; width: 100px;float: left; }

利用 border占位 

空标签元素 浏览器会忽略吧?

旧城的骁珖
旧城的骁珖
@牛牛牛牛 : 诡异?
牛牛牛牛
牛牛牛牛
哈哈,是的。这个要根据背景颜色。 还是学生能想到的不多,但是空span和空div都是个很诡异的东西。
旧城的骁珖
旧城的骁珖
加border可行 但是多了白色线 这个在有特殊背景的情况下。。那就...
0
牛牛牛牛
牛牛牛牛

span {padding-right  : 100px; width: 100px; } 

不知道 float: left; 是否可以去掉呢

旧城的骁珖
旧城的骁珖
前面的span很有可能是有内容的,只是在没有内容的时候,出现了意料之外的情况....
返回顶部
顶部