HTML5输入元素的CSS浮点失败

我在使用带有CSS float属性的HTML5表单输入类型（数字、日期、电子邮件等）时遇到了一个问题。我试着把它们放到右边，但它们不尊重这种设置

下面是一个小例子，我在测试期间将CSS内联：

<div class="center" style="width: 100%">
...
<div style="width: 90%" class="textfont">
...
<table style="width:100%;">
     <thead>
         <tr class="tableHeading">
             <td style="width: 50%; text-align: center;">
                 Unit Types
              </td>
              <td style="text-align: center;">
                  Number of Units
              </td>
          </tr>
       </thead>
       <tbody>
           <tr>
               <td style="border-right: 1px;">
                   Single&#45;Family Detached
                </td>
                <td>
                   <input type="number" name="txtDetached" style="width:25%; float:right" />
                 </td>
            </tr>
            <tr>
                <td style="height: 32px">
                    Townhouse, Row, or Cluster
                 </td>
                 <td style="height: 32px">
                     <input type="number" name="txtCuster" style="width:25%; float:right" />
                 </td>
             </tr>
             <tr>
                 <td>
                     Garden
                 </td>
                 <td>
                     <input type="number" name="txtGarden" style="width:25%; float:right" />
                 </td>
              </tr>
              <tr>
                 <td style="height: 43px">
                      Mid&#45;rise (3&#45;5)
                 </td>
                 <td style="height: 43px">
                      <input type="number" name="txtMidrise" style="width:25%; float:right" />
                  </td>
               </tr>
                <tr>
                    <td>
                        High&#45;rise (6&#43;)
                    </td>
                    <td>
                        <input type="number" name="txtHighRide" style="width:25%; float: right" />
                   </td>
                </tr>
                <tr>
                    <td>
                        Other
                    </td>
                    <td>
                        <input type="text" name="txtOther" style="width: 80%; float: right;" />
                    </td>
                </tr>
            </tbody>
        </table>
   ...
   </div>
  ...
</div>

以下是显示的内容：

正如您所看到的，带有

type=“text”

的输入元素可以正常工作，但是当

type=“number”

时，它保持默认值，左对齐

这种行为存在于IE10、FireFox和Chrome中

我发现解决方法是将HTML5输入类型包装在一个div中，然后将CSS设置为使div向右浮动，这样就不会出现问题。我在网上查找这方面的信息时遇到了问题，但这是一个已知的问题吗？解决方法实际上是正确的处理方法吗

---

编辑：添加了完整的CSS（减去我为了测试而内联移动的内容）。添加了整个表和它们所包装的div。如果我将所有这些复制到JSFIDLE，它会正常工作，因此我显然在这里做错了…

好的，与

中的浮动元素相关的问题，使用

文本对齐可以解决它

<td style="text-align:right;">
  ...
</td>


...

更多内容可以在这里阅读
对我来说似乎很好。请将所有与表格及其单元格相关的CSS张贴在一个单独的案例中，以显示您的问题。是的，正如您在这里看到的：在chrome、ff和ie11中，如果您遇到问题，它工作正常。为什么不在tdHmm上直接使用文本对齐，而不是将输入浮动到右边呢……我必须在某个地方使用其他CSS，这会让我感到不舒服。让我做一些挖掘，我将发布一个更新，其中包含更多的代码。@JNYRanger您确定表中的每个tr中总是有2个td吗？
<td style="text-align:right;">
  ...
</td>