html - 样式化 HTML元素：避免无效的父级

Question

情况：

我有一个站点，其中包含跨多个页面的一长串问题。

每个问题都在一个由标签和输入组成的范围内。问题 div 组位于附加 div 中，以提供分组和边框样式等。

问题：

我想给我的问题编号，但想避免对编号进行硬编码。但是，将 html 放置<li>在 div 或标签内部是无效的。

此外，一些问题 div 会根据用户输入有条件地隐藏和显示。因此，div 提供了关键功能，并且数字必须与这些 div 一起隐藏和显示，（因此将每个<li>放在 div 之外是有问题的。

代码：

这是我的表单的精简结构示例，显示了两个问题“块”：

<form id="myform" method="post" action="/destinaion/page.php">
    <div class="formfield">
        <div class="page1">
            <div class="lowerborder">
                <div class="question">                      
                    <label for="q2">Question 1</label> 
                    <input type="number" id="q1" name="q1"/>
                </div>

                <div class="question">                      
                    <label for="q1">Question 2</label> 
                    <input type="number" id="q2" name="q2"/>
                </div>
            </div>
        </div>
    </div>
</form>

div 类表单字段包含表单页面和 page1 页面 1 的各种样式细节。

我想从我的问题中列出一个有序的列表，也许像

努力实现目标：

<form id="myform" method="post" action="/destination/page.php">
    <div class="formfield">
    <ol>
        <div class="page1">
            <div class="lowerborder">
                <div class="question">                      
                    <label for="q2"><li>Question 1</li></label> 
                    <input type="number" id="q1" name="q1"/>
                </div>

                <div class="question">                      
                    <label for="q1"><li>Question 2</li></label> 
                    <input type="number" id="q2" name="q2"/>
                </div>
            </div>
        </div>
    </ol>
    </div>
</form>

但是正如您所看到的，我将其中 a) 不是有效的 html<li>放入<label>其中，并且 b) 不能在所有浏览器中正常运行。

<li>当我的列表项被许多嵌套的 div 分隔时，如何避免将元素放入无效的父项中？

jsFiddle：

请参阅我上述尝试的小提琴。包括我试图实现的一些样式和功能（通过嵌套 div 设置样式、显示的隐藏问题等）

Answer 1

请看这个小提琴演示如何在不插入任何其他元素的情况下做你想做的一切。我发现任何地方都不需要一个 div。

注意：我最初用于float:left问题以使答案正确排列。但是，这导致 IE 呈现答案左侧的数字而不是问题左侧的数字。我切换到使用display:inline-block，现在一切都在 IE 中运行。

评论：

• 我清理了样式表，其中有一些重复和冲突的样式规则。我删除了不必要的规则。

• 我使用一个类创建了分隔问题组的线条，并且我还将它应用于问题的顶部边框而不是底部，这样即使有隐藏的问题结束了一个组，你也可以使用它，因为隐藏的问题可能永远不会开始一个小组。不需要额外的元素有边界。

• 在我看来，“显示”复选框的标签应该是它旁边的文本，以便您可以单击该文本来选中和取消选中该框。因此，我为问题项目添加了一个“问题”类，而不是使用标签。您必须将样式“问题”应用于问题以使其样式正确。您可以将其应用于标签元素（是否用于其他内容），或者您可以使用跨度或其他元素来包含不是标签的文本。

• IE 7 愚蠢地将数字放在行的底部，即使问题的样式是vertical-align:top. 我现在不知道如何解决这个问题，但对于那些比我更擅长 CSS 怪癖的人来说，这可能是另一个问题。

• IE 没有很好地处理“隐藏”方法，占用了额外的空间，然后在显示时不显示子元素，所以我改用绝对定位（通过将其从文档流中取出，具有相同的效果）。请参阅 CSS 以了解其工作原理。

• 我修改了您应用显示脚本的方式。我没有手动连接每个单独的项目，而是在复选框本身上放置一个数据值，然后在准备好的事件中，我使用它来适当地连接页面。现在，您可以拥有显示更多问题的复选框，只需向显示的问题添加一个 id（或者如果您需要一次显示多个问题，则使用 class 代替）和一个 data expando 属性，例如data-togglehidden="l4"指定要在复选框元素。无需更改脚本。

• 它看起来有点像你可能有“div-itis”，这是一种在整个地方增加 div 的趋势。不用尴尬，当我刚接触 html 开发时，我也有过 div-itis。由于这样的经历，你会从中成长。通常，您应该使用普通的非 div 页面元素并直接对其进行样式设置，而不是将内容包装在 div 中并对其进行样式设置。当您需要为一组相关功能设置样式或为不同元素提供一个框时，Div 很有用。您可能不正确地使用 div 的一个提示是当它们只有一个项目时（尤其是另一个 div）。有时这是必要的，但问问自己：我可以将样式移动到父元素或子元素吗？

• 我需要更多地了解您提到的“页面”是如何工作的并且在您的原始 html 标记中。html中没有页面，只有打印html时。所以我不太确定这意味着什么或如何为您设置页面样式。

这是清理后的 html，不需要 ol 和 li 之间的其他元素：

<form id="myform" method="post" action="/destination/page.php">
    <ol class="formfield">
        <li>
            <label class="question" for="q1">What is your first name?</label>
            <input type="text" id="q1" name="q1"/>
        </li>
        <li>
            <label class="question" for="q2">A very long question 2 that is sure to run to a second line just to prove that such a thing will work properly and not mess up the layout, described in your own words?</label>
            <input type="text" id="q2" name="q2"/>
        </li>
        <li class="begingroup">
            <span class="question">Are you the type of person who likes to needlessly answer extra questions?</span>
            <input type="checkbox" id="q3" name="q3" data-togglehidden="l4"/>
            <label for="q3">Yes, yes, that's me!!!</label>
        </li>
        <li id="l4" class="hidden">
            <label class="question" for="q4">Why do you like to do extra needless work?</label>
            <input type="text" id="q4" name="q4"/>
        </li>
        <li class="begingroup">
            <label class="question" for="q5">What was your first pet's name?</label>
            <input type="text" id="q5" name="q5"/>
        </li>
    </ol>
</form>

这是 Firefox 16.0.2 中的样子：

在 IE 7.0.5730.13CO 中：

CSS：

ol.formfield {
    width: 500px;
    margin: 10px auto;
    padding: 16px 16px 16px 0;
    border: 5px groove #005E9B;
    list-style: decimal outside;
    color: black;
    background-color: #6Fc2F7;    
    font-family: 'Oxygen', sans-serif;
    font-size:15px;
}

ol.formfield li {
    clear: both;
    padding: 2px;
    margin-left: 1.7em;
}

ol.formfield li.begingroup {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #005E9B;
}

.question {
    display:inline-block;
    width:300px;
    vertical-align:top;      
}

.hidden {
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
}

ol.formfield input {
    border-radius:5px; /* css 3 */
    -moz-border-radius:5px; /* mozilla */
    -webkit-border-radius:5px; /* webkit */
}

data以及根据元素值连接隐藏/显示的脚本：

$('ol.formfield input:checkbox')
    .each(function() {
        var d = $(this).data('togglehidden');
        if(d) {
            $(this).on('change', function() {
                if ($(this).attr('checked')) {     
                    $('#' + d)
                        .removeClass('hidden')
                        .find(':input')
                        .focus();
                } else {
                    $('#' + d).addClass('hidden');
                }
            });
        }
    });