css – display:table-cell不能在输入元素上工作

前端之家收集整理的这篇文章主要介绍了css – display:table-cell不能在输入元素上工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想做一个表单的一部分看起来像电子表格。
有几种形式,< table>因此这是不可行的(虽然我不反对它,当你打印语义表格数据,就像这样)。

所以我试图简单地使用CSS2.1布局直接与表单输入元素,例如。

<div class="table">
    <form class="tbody">
        <div class="tr">
            <label class="td">Label</label>
            <input class="td" name />
            <input class="td" name />
        </div>
    </form>
</div>

the fiddle的完整例子。

但是它看起来像显示:table-cell在< input>上不起作用元素!

如果您检查Chrome“计算风格”,显示将为“内联元素”。

但是我没有找到任何为什么不应该:

> Mozilla Dev Network CSS:display
> W3C CSS 2.1 Recommendation Visual Formatting Model
> W3C Tables Recommendation

任何想法?

它听起来好像有一些< div class =“cell”>围绕< input>然后不得不玩盒子模型让它看起来不错…

解决方法

W3.org

“CSS 2.1 does not define which properties apply to form controls and frames,or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.”

对不起,但显示:table-cell对输入元素进行实验处理。尝试避免它,使用包装元素进行定位。

我用div元素做了一个例子。现在,您可以在表格中拥有多个表单,但是只有当表单元素跨越完整的行时才可以使用。否则你的嵌套将被破坏。

编辑:
更新了小提琴与添加边框崩溃的版本,以避免双边界。

JSFiddle example

猜你在找的CSS相关文章