在表格上方添加輸入

Question

如何在HTML中看到我有兩個表格。現在我想每個表後添加輸入：

1.Shows我的HTML是什麼樣子沒有span S和input小號

2.Shows現在的樣子：http://jsfiddle.net/tLHSB/2/

3.How我想有它

感謝您的幫助！

我的HTML：

<span> 
<table class="table table-bordered" style="font-size:13px; width:50px; float:left;" id="ScheinDiagnosen"> 
    <thead> 
    <tr id="DiagnosenButton"> 
     <th>Number1</th> 
    </tr> 
    </thead> 
    <tbody id="DiagnosenBlock" style="background-color: red">  
     <tr class="sanD"><td>H26.2</td></tr> 
     <tr class="sanD"><td>H90.2</td></tr> 
     <tr class="sanD"><td>B01.1</td></tr> 
     <tr class="sanDD"><td>B01.1</td></tr></tbody> 
</table> 
    <input style="width:10px; display:block"> 
</span> 
<span> 
<table class="table table-bordered" style="font-size:13px; width:50px; float: left;" id="ScheinEbms"> 
    <thead> 
    <tr id="EBMButton"> 
     <th>Number</th> 
    </tr> 
    </thead> 
    <tbody id="EbmBlock" style="background-color: blue;"> 

    <tr><td>02401</td></tr> 
    <tr><td>02400</td></tr> 
    <tr><td>03322</td></tr> 
</tbody> 
</table> 
    <input style="width:10px;display:block"> 
</span> 

Answer 1

的問題是，你在你的浮表，這會導致他們打出來的文件流。有幾種方法可以完成你想要的功能，但試着用div s代替span元素，然後浮動它們而不是表格。

此外，不要使用內聯樣式，請使用CSS塊。從長遠來看，它會使您的代碼更易於維護。

與div小號更換你的span S，和刪除內聯樣式，新的CSS看起來像：

table { 
    font-size:13px; 
    width:50px; 
} 
#DiagnosenBlock { 
    background-color: red; 
} 
#EbmBlock { 
    background-color: blue; 
} 
div { 
    float: left; 
} 

演示：http://jsfiddle.net/Palpatim/tLHSB/4/

Answer 2

添加到您的CSS：

span { 
    float:left; 
} 

從你table風格刪除float:left。

這裏檢查它：http://jsfiddle.net/tLHSB/5/