html - 在表格上方添加输入

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

问题是您要 float 表格，这会导致它们脱离文档流。有几种方法可以完成您想要的，但请尝试将 span 元素替换为 div 并 float 它们而不是表格。

另外，不要使用内联样式，使用 CSS block 。从长远来看，这将使您的代码更易于维护。

用 div 替换您的 span，并删除内联样式，您的新 CSS 将如下所示:

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

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