创建调色板时遇到问题

Question

对于我的项目，我正在创建一个允许用户绘画的应用程序。

我成功创建了 canvas 和画笔，并且已经知道如何使用 Javascript 和 Jquery。

我遇到的唯一问题是创建调色板。

HTML

<div id = "colors">
    <div style="background: #990000;"></div>
    <div style="background: #CC0000;"></div>
    <div style="background: #CC3300;"></div>
    <div style="background: #FFCC00;"></div>
    <div style="background: #FFFF00;"></div>
    <div style="background: #CCFF00;"></div>
    <div style="background: #66FF00;"></div>
    <div style="background: #003300;"></div>
    <div style="background: #33FFCC;"></div>
    <div style="background: #3300CC;"></div>
    <div style="background: #660033;"></div>
    <div style="background: #660066;"></div>
    <div style="background: #000000;"></div>
    <div style="background: #ffffff;"></div>
</div>

application.css

#colors {
  width: 180px;
  height: 30px;
}

我创建了一个fiddle

http://jsfiddle.net/fqfbprd7/1/

如果我向 div 添加一些文本，就像我在 fiddle 中所做的那样，我会看到呈现的颜色，但它们都在各自的行上。类似于paint，这应该是一个颜色选择框，每行有7种颜色。不过只有颜色，没有文字。

我什至为我的颜色 div 设置了 width 和 height 属性来渲染一个颜色框。

Answer 1

定位 DIV 在 #colors 内并使用位置属性值 inline-block 让它们并排显示。

 #colors div {
      display: inline-block;

}

#colors {
   width: 180px;
   height: 30px;
 }

 #colors div {
      display: inline-block;
}

<div id ="colors">
    <div style="background: #990000">A</div>
    <div style="background: #CC0000">B</div>
 <div style="background: #CC3300">C</div>
 <div style="background: #FFCC00">D</div>
 <div style="background: #FFFF00">E</div>
 <div style="background: #CCFF00">F</div>
 <div style="background: #66FF00">G</div>
 <div style="background: #003300">H</div>
 <div style="background: #33FFCC">I</div>
 <div style="background: #3300CC">J</div>
 <div style="background: #660033">K</div>
 <div style="background: #660066">L</div>
 <div style="background: #000000">M</div>
 <div style="background: #ffffff">N</div>
</div>

Answer 2

这里是更新后的 fiddle:

http://jsfiddle.net/fqfbprd7/2/

#colors div {
   width: 25px;
   height: 30px;
    float: left;
 }

创建调色板时遇到问题

Having trouble creating a color palette

html

css

background-color