Question

我发现了一种将输入和标签元素作为手风琴查看器的方法。

要使我的元素垂直居中，我使用标签就好像它是一个div，即给它display:table并在其中创建一个div。所以我有：

<div>
    <input id='myid'>
    <label for ='myid' style='display table'>
        <div style='display:table-cell'>
            <img ....... > 
            thetextforthelabel 
        </div>
    </label>
</div>

好的，这很好用。

我的问题是：我做了什么＆＃39; forbiden＆＃39; ？我可以将label标签用作容器吗？

我知道它可能不是正统的......但它对我有用......

Answer 1

您的代码无效。

问题是div元素只能用于

预计会flow content。

但是，content model元素的label是

Phrasing content，但没有后代labelable elements 除非它是元素的labeled control，没有后代 label元素。

无论如何，它可能会起作用，因为（与p元素不同）label元素的结束标记不能省略：

这两个标签都没有遗漏

但是，我不确定具有单个单元格的表格元素的优势。请考虑使用以下内容：

<div>
    <input id='myid'>
    <label for='myid' style='display:block'>
        <img ....... > 
        thetextforthelabel 
    </label>
</div>

Answer 2

是的，HTML的正式规则是禁止的。是的，它的工作原理，HTML的解析规则意味着它必须工作。因此，这与说明p元素不得包含div元素的规则不同; 规则由解析过程强制执行（遇到p时隐式关闭<div>元素。）

另一方面，如果内容只是图片和文字，则您不需要div元素，但可以使用span。在渲染中，您选择哪一个（与通常的CSS警告无关），因为它们在渲染方面的唯一区别是使用默认的display值，并且您无论如何都要分配display值。 / p>

＆＃13;

<div>
    <input id='myid'>
    <label for ='myid' style='display table'>
        <span style='display:table-cell'>
            <img src="http://lorempixel.com/100/50" alt="(an image)">
            thetextforthelabel 
        </span>
    </label>
</div>

＆＃13;

我可以“设计”并使用标签作为“普通”元素

2 个答案: