将画布和文本框放在同一行上

我想将40x40画布，文本框和另一个40x160画布全部放在同一行上，但它看起来可行，这就是我想出来的与：将画布和文本框放在同一行上

<span><canvas id="color" width="40" height="40"></canvas></span> 
<span><input type="text" id="rbg_value" /></span> 
<span><canvas id="color_picker" width="160" height="40"></canvas></span>

但是，当我这样做的第一个画布是在自己的路线，文本框和其他画布在一起排队。任何想法可能是什么？

来源

2012-07-10 Huub Mons

可能是因为他们是 “块” 的元素。尝试添加style =“display：inline;”到您的画布和输入元素。 – inVader 2012-07-11 00:03:29

我可以重现您的问题。看看[这个小提琴]（http://jsfiddle.net/riateche/MDCGW/）。所有三个元素都在同一行（如果帧宽足够大）。也许您网页上的其他一些CSS会导致不需要的行为。画布的“显示”必须是内联块“（这似乎是默认设置） – 2012-07-11 00:09:05

我不知道，因为我从来没有使用它，但根据http://www.coursesweb.net/html/html5- – inVader 2012-07-11 00:11:29

试试这个，

<table cellpadding="0" cellspacing="0" border="0" width="300"><tr><td width="40"> 
<canvas id="color" width="40" height="40"></canvas> 
</td><td width="100"> 
<input type="text" id="rbg_value" /> 
</td><td width="160"> 
<canvas id="color_picker" width="160" height="40"></canvas> 
</td></tr></table>

来源

2012-07-11 05:22:08 Matt

当我这样做时，它使每个单元格非常长，所以每个单元之间有很多不必要的空间，最后一个画布在页面上甚至不可见。是否有一种方法可以缩小单元格以适合每个单元格的长度元素？ – 2012-07-11 16:22:56

首先请确保'canvas'或'input'元素'没有任何全局css风格，您可以使用Mozilla或Chrome检查元素工具找到它，它是找到对齐问题的最佳方法。属性cellpadding = 0和cellspacing = 0。你也可以给宽度和高度属性为td。查看更新的答案。你也可以给表格元素提供css风格。希望能帮助到你。 – Matt 2012-07-12 04:25:48

还有一件事，看起来你正在尝试创建一个颜色选择器。检查您的JavaScript或任何脚本代码也可以找到它设置任何样式属性。不管它是什么，你都可以使用inspect元素工具找到它。 :) – Matt 2012-07-12 04:29:50

将画布和文本框放在同一行上

回答

相关问题