在表格上方添加输入

Question

如何在我的HTML中看到我有两张桌子。现在我想在每个表之后添加输入：

1.显示我的Html在没有span和input的情况下的外观

2.显示它现在的样子：http://jsfiddle.net/tLHSB/2/

3.我想拥有它

感谢您的帮助！

我的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

问题是您要浮动表格，这会导致它们脱离文档流程。有几种方法可以实现您的目标，但尝试用span替换div元素并浮动它们而不是表格。

另外，不要使用内联样式，使用CSS块。从长远来看，它可以使您的代码更易于维护。

将span替换为div并删除内联样式，您的新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;
}

从float:left样式中删除table。

在此处查看：http://jsfiddle.net/tLHSB/5/