如何在html中设置span标签的宽度

Question

我在不同宽度的基础上显示不同颜色的垂直条，但即使我改变宽度也显示固定宽度

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

Answer 1

您可以参考以下示例

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

http://jsfiddle.net/laurensrietveld/JZ2Lg/

或者使用display: block;，然后给出宽度