Css 如何在html中设置跨度标记的宽度

我在不同宽度的基础上显示了一个不同颜色的垂直条，但它显示了一个固定的宽度，即使我更改了宽度

<span style="position:relative;border-left:solid;left:0px;top:0px;width:550px;height:18px;clip:rect(0,550px,18px,0);background-color:#f0f0f0;overflow:hidden; border:1px solid #000000;"></span> 
<span style="position:relative;border-left:solid;left:0px;top:0px;width:350px;height:18px;clip:rect(auto,auto,auto,auto);background-color:#FFFFFF;overflow:hidden; border:1px solid #000000;"> </span>

---

---

您可以参考以下示例

<ul>
<li><span>&nbsp;</span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
</ul>

ul 
{
list-style-type: none;
padding-left: 0px;
}

ul li span { 
float: left;
width: 40px;
}

懒狗
还有那只懒猫
或者是活跃的金鱼

保险商实验室
{
列表样式类型：无；
左侧填充：0px；
}
ul li span{
浮动：左；
宽度：40px；
}

或使用

显示：块然后给出宽度