这是我所拥有的，但这些盒子在文本之前，之后

<代码>.box{浮动：左；高度：20px；宽度：20px；}.红色{背景颜色：红色；}.蓝色{背景颜色：蓝色；}.绿色{背景颜色：绿色；}

<代码><；UL>；<；Li>；red<；SPAN CLASS=“ BOX RED ”>；<；/SPAN>；<；/Li>；<；Li>；绿色<；SPAN CLASS=“ box green ”>；<；/SPAN>；<；/Li>；<；Li>；蓝色<；SPAN CLASS=“ BOX BLUE ”>；<；/SPAN>；<；/Li>；<；/UL>；

顺晟科技：

浮动很麻烦，而且通常是一种过时的方法。除非你知道原因，否则不要使用它们。在这里，当设置为.box { float: left; height: 20px; width: 20px; } .red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; }时，它们所做的是人们所期望的，即将它们的元素移动到其包含元素的左侧。

另请注意，span元素是内联的。这意味着它们没有尺寸。使用DIV或将其设置为<ul> <li>Red<span class="box red"></span></li> <li>Green<span class="box green"></span></li> <li>Blue<span class="box blue"></span></li> </ul>。花车有效地为你做到了这一点，但我们现在需要自己做。

<代码>.box{显示：inline-block；高度：20px；宽度：20px；}.红色{背景颜色：红色；}.蓝色{背景颜色：蓝色；}.绿色{背景颜色：绿色；}

<代码><；UL>；<；Li>；red<；SPAN CLASS=“ BOX RED ”>；<；/SPAN>；<；/Li>；<；Li>；绿色<；SPAN CLASS=“ box green ”>；<；/SPAN>；<；/Li>；<；Li>；蓝色<；SPAN CLASS=“ BOX BLUE ”>；<；/SPAN>；<；/Li>；<；/UL>；