Question

当使用CSS浮点属性的HTML5表单输入类型（数字，日期，电子邮件等）时，我遇到了一个问题。我试图将这些浮动到右边，但他们并不尊重这种设置。

这是一个snippit，我在测试期间将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>

是的，我知道桌子不受欢迎......

以下是整体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;
    }

这是显示的内容：

Failing Float

正如您所看到的，type="text"的输入元素没有问题，但是当type="number"保持默认值时，左对齐。

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

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

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

Answer 1

好的，与<td>中的浮动元素相关的问题，使用text-align可以修复它。

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

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

HTML Float对HTML5输入元素失败

1 个答案: