HTML5 输入元素的 CSS Float 失败

标签 css html css-float

在将 HTML5 表单输入类型(数字、日期、电子邮件等)与 CSS float 属性一起使用时,我遇到了问题。我试图将它们向右浮动,但它们不符合该设置。

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

这是显示的内容:

Failing Float

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

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

我发现解决方法是将 HTML5 输入类型包装在一个 div 中,然后将 CSS 设置为使 div 正确 float ,这样就可以正常工作了。我在网上查找这方面的信息时遇到了问题,但这是一个已知问题吗?解决方法实际上是处理此问题的正确方法吗?

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

最佳答案

OK,内部 float 元素相关的问题<td> , 使用 text-align可以修复它。

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

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

关于HTML5 输入元素的 CSS Float 失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28944139/

相关文章:

javascript - 如何在延迟加载时使图像可见

html - 我如何修复我的网站导航字体以防止跨页面更改

CSS:如果元素显示:无,则保持对象的 float 和第 n 个子对象清除

从菜单到子菜单的 CSS 箭头

CSS3 过渡不起作用

javascript - 你如何从它的父级关闭模态窗口?

javascript - 根据背景颜色改变汉堡菜单的颜色

javascript - 如何切换叠加层以便在单击另一个链接时关闭叠加层?

css - 将这三个容器均匀对齐

css - 如何通过CSS调整一系列DIV的高度