在表格上方添加输入

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/