CSS HTML5 输入元素的浮动失败

Question

我运行在使用 HTML5 表单输入类型（数字、日期、电子邮件等）和 CSS 浮点数属性时遇到问题。我试图将它们向右浮动，但它们不符合该设置。

这是我在测试期间内联 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>

是的，我知道 table 不受欢迎...

这是整体CSS：

    .Header
    {
        font-size: 30px;
        font-family: Cambria;
        color: White;
        background: #254117;
        text-align: center;
        font-weight: bold;
        width: 90%;
    }
    .subHeading
    {
        font-family: Arial;
        font-size: 11px;
        text-align: left;
    }

    .container
    {
        display: table;
        width: 90%;
        border-collapse: collapse;
    }
    .heading
    {
        font-weight: bold;
        display: table-row;
        background-color: #C91622;
        text-align: center;
        line-height: 25px;
        font-size: 14px;
        font-family: georgia;
        color: #fff;
    }
    .table-row
    {
        display: table-row;
        text-align: center;
    }
    .col
    {
        display: table-cell;
        border: 1px solid #CCC;
    }

    .tableHeading
    {
        font-family: Arial;
        background: #99C68E;
        font-size: 18px;
        text-align: left;
    }

    .textfont
    {
        font-size: 15px;
        font-family: Arial;
        text-align: left;
    }

    input[type=text]
    {
        width: 100%;
        height: 22px;
    }

    textarea
    {
        width: 98%;
    }
    table
    {
        border-collapse: collapse;
        border: 1px solid black;
        border-spacing: 10px;
    }
    tr
    {
        border-collapse: collapse;
        border: 1px solid black;
    }
    td, th
    {
        padding: 5px;
    }
    .center
    {
        margin-left: auto;
        margin-right: auto;
    }

这是显示的内容：

如您所见，带有 type="text" 的输入元素可以正常工作，但是当 type="number" 时它保持默认，左对齐。

此行为存在于 IE 10、FireFox 和 Chrome 中。

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

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

Answer 1

好的，<td>里面的浮动元素相关的问题，使用text-align可以解决。

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

可以在此处阅读更多内容 DIV in <td> float right

CSS HTML5 输入元素的浮动失败

CSS Float fails for HTML5 Input Elements

css

html

css-float