html - CSS 显示表 + SPAN 错误

Question

我有这个例子： 小提琴链接

使用 display: table, display: table-cell, display: table-row 的表格

我需要在 <p> 之前添加一个 <span> 标记，但是我的表结构中断了。

任何想法？谢谢

例子：

<fieldset>
<span>
<p>
    <label>First Name: </label>
    <input type="text" />
</p>
</span>
<span>
<p>
    <label>Second Name: </label>
    <input type="text" />
</p>
</span>
<span>
<p>
    <label>Country: </label>
    <select>
        <option>Choose</option>
    </select>
</p>
</span>
<span>
<p>
    <label>Age: </label>
    <select>
        <option>Choose</option>
    </select>
</p>
</span>
</fieldset>

Answer 1

如果要显示为表格，则所有元素都应遵循相同的结构属性

fieldset span {
    display: table-row-group;
}

小提琴：http: //jsfiddle.net/qQ3xJ/

Answer 2

您将table-row元素（<p>在本例中为标签）包装为<span>. 您可以将<span>元素的显示类型更改为table-row-group：

fieldset span {
    display: table-row-group;
}

这是JSFiddle 演示

Answer 3

我会使用这样的不同结构：http: //jsfiddle.net/7Kxf5/，带有div或ul列表。

我认为span在这种情况下使用不适合一个好的做法。