如何实现列表项末尾带彩色方块？现有代码方块显示在文字前需调整位置

问题原因 #

你给.box设置的float: left是问题核心：浮动元素会脱离正常文档流，左浮动的元素会优先停靠在父容器的左上角，所以即便你把彩色方块的span标签写在文本内容后面，渲染时也会跑到文本前方。

解决方法 #

根据你要的效果选以下任意一种方案即可，HTML代码不需要改动：

方案1：彩色方块紧贴文本末尾 #

删掉原有浮动属性，换成行内块属性，元素会按照HTML书写顺序正常排列：

.box {
  /* 移除原有的float: left */
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-left: 8px; /* 可选属性，用来和文本拉开间距更美观 */
  vertical-align: middle; /* 可选属性，让方块和文本垂直居中对齐，避免上下错位 */
}

方案2：彩色方块对齐列表项最右侧 #

保留浮动逻辑，仅修改浮动方向即可：

.box {
  float: right; /* 把原有的left改为right */
  height: 20px;
  width: 20px;
  margin-left: 8px; /* 可选属性，用来和文本拉开间距更美观 */
}

内容的提问来源于stack exchange，提问作者weesh