Question

谢谢你的想法！

Answer 1

<ul>
  <li style="padding-bottom: 5px;display: flex;">
   <input type="checkbox">
    <i style="background:#FF0000;width: 18px;height: 18px;float:left;margin-
    right: 8px;opacity: 0.7;"></i> 
     <span>Red</span>
  </li>
  <li style="padding-bottom: 5px;display: flex;">
     <input type="checkbox">
     <i style="background:aqua;width: 18px;height: 18px;float: left;margin-
     right: 8px;opacity: 0.7;"></i> 
     <span>aqua</span>
  </li>
  <li style="padding-bottom: 5px;display: flex;">
    <input type="checkbox">
     <i style="background:brown;width: 18px;height: 18px;float: left;margin-
     right: 8px;opacity: 0.7;"></i> 
       <span>brown</span>
 </li>
</ul>

稍后您可以删除样式并放入单独的css文件。

Answer 2

看一下在线示例：我放了span元素（你也可以放div或p或任何其他元素，设置背景颜色并添加空格char）

<input type="radio" value="1"><span style="background-color:lime;">  &nbsp  &nbsp </span>Test</input>

在下一个例子中，我使用像width参数这样的文本。

  <input type="radio" value="1" style="width:20px;height:auto;" /> 
   <span style="background-color:lime;border:solid silver 2px;">Text in Rect   
   </span> Out of rect text

我使用填充作为rect size（宽度）但是没有文本！

<input type="radio" value="1" style="width:20px;height:auto;" /> 
   <span style="background-color:lime;border:solid silver 2px;padding-left:100px">   
   </span> Out of rect text

如何在HTML或Javascript中制作这些彩色矩形？

2 个答案: