Question

情况：

我有一个网站，其中包含多个页面的长问题列表。

每个问题都在标签和输入内。问题div的组在另外的div内，以提供分组和边界样式等。

问题：

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

此外某些问题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>

但是你可以看到我将<li>放在<label>里面a）是无效的html，而b）不适合所有浏览器。

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

的jsfiddle：

见a fiddle of my above attempt。包括我试图实现的一些样式和功能（通过嵌套div设计样式，隐藏的问题揭示等）

Answer 1

请参阅this fiddle，了解如何在不插入任何其他元素的情况下完成所需的一切。我发现在任何地方都不需要任何一个div。

注意：我最初使用float:left来解决问题，以便正确排列答案。然而，这导致IE渲染答案左侧的数字而不是问题的左侧。我转而使用display:inline-block，现在一切都在IE中运行。

评论：

我清理了样式表，其中有一些部分重复且冲突的样式规则。我删除了不必要的规则。
我创建了使用类分隔问题组的线条，并且我还将其应用于问题的顶部边框而不是底部，以便即使存在隐藏的问题也可以使用它小组，因为一个隐藏的问题可能永远不会开始一个小组。没有其他元素可以有边框。
在我看来，“显示”复选框的标签应该是旁边的文本，以便您可以单击该文本以选中并取消选中该框。因此，我在问题的项目中添加了“问题”类，而不是使用标签。您必须在问题中应用“问题”样式才能使其正确定型。您可以将其应用于标签元素（用于或不用于其他内容），或者可以使用span或其他元素来包含文本（如果文本不是标签）。
IE 7愚蠢地将数字放在行的底部，即使问题是用vertical-align:top设置的。我现在不知道如何解决这个问题，但对于那些在CSS怪癖中比我更专业的人来说，这可能是另一个问题。
IE没有很好地处理“隐藏”方法，占用额外空间然后当显示不显示子元素时，所以我使用绝对定位（通过将其从文档流中取出，具有相同的效果）。请参阅CSS了解其工作原理。
我修改了你应用揭密脚本的方式。而不是手动连接每个单独的项目，而是我在复选框本身上放置一个数据值，然后在ready事件中我使用它来适当地连接页面。现在，您可以通过向显示的问题添加id来显示更多问题的复选框（或者如果您需要一次显示多个，则使用类）和像data-togglehidden="l4"这样的数据expando属性来指定id在复选框元素中切换。无需更改脚本。
看起来有点像你可能有“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中的样子： Form in Firefox 16.0.2

在IE 7.0.5730.13CO中： Form in 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');
                }
            });
        }
    });

样式化HTML <li>元素：避免无效的父<div> </div> </li>

1 个答案: