小编典典

display:table-cell在输入元素上不起作用

css

我想将表单的一部分看起来像电子表格。有几种形式,<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>

但是它看起来 display:table-cell<input>元素不起作用

如果您签入Chrome的“计算机样式”,则显示内容为“内联元素”。

任何的想法?

这听起来比在<div class="cell">周围放一些更好<input>,然后不得不玩盒子模型来使它看起来更好…


阅读 913

收藏
2020-05-16

共1个答案

小编典典

从W3.org

“ CSS
2.1没有定义哪些属性适用于表单控件和框架,也没有定义如何使用CSS设置样式。用户代理可以将CSS属性应用于这些元素。建议作者将此类支持视为实验性的。CSS的未来级别可以进一步指定。”

抱歉,但是display: table-cellinput元素进行实验性处理。尽量避免这种情况,例如使用wrapper-elements进行定位。

我用div元素做了一个例子。现在,一个表中可以有多个表单,但是仅在form元素跨满行时才起作用。否则,您的嵌套将被破坏。

编辑: 更新了小提琴与版本,其中border-collapse添加以避免双边框。

2020-05-16