如何使用 html 和 css 创建一个小颜色框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11226126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I create a small color box using html and css?
提问by Ionut Cristea
I have a picture on a html file/site and I want to add the list of available colors for that picture. I want to create very small boxes or dots, a small box for every color.
我在 html 文件/站点上有一张图片，我想为该图片添加可用颜色列表。我想创建非常小的盒子或点，每个颜色的小盒子。
How can I do this?
我怎样才能做到这一点？
Thanks!
谢谢！
回答by Nit
You can create these easily using the floating ability of CSS, for example. I have created a small example on Jsfiddle over here, all the related css and html is also provided there.
例如，您可以使用 CSS 的浮动功能轻松创建这些。我在这里创建了一个关于 Jsfiddle 的小例子，那里也提供了所有相关的 css 和 html。
.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
background: #13b4ff;
}
.purple {
background: #ab3fdd;
}
.wine {
background: #ae163e;
}<div class="foo blue"></div>
<div class="foo purple"></div>
<div class="foo wine"></div>回答by syadiqfaliq
If you want to create a small dots, just use icon from font awesome.
如果你想创建一个小点，只需使用字体真棒图标。
fa fa-circle
