將畫布和文本框放在同一行上

我想將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

將畫布和文本框放在同一行上

回答

相關問題