造型HTML 元素：避免了无效的父 (Styling HTML <li> elements:

这种情况：

我有一个跨多个页面的问题一长串的站点。

每题内由一个标签和输入的。问题的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类表单字段包含窗体页，第1页和各种造型细节为第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）并不适用于所有的浏览器玩好。

我怎样才能避免把<li>元素无效家长里面，当我的列表项都受到许多嵌套的div分开吗？

的jsfiddle：

见我的上述尝试的小提琴。包括一些造型和功能，我想实现（通过嵌套的div，揭示隐藏等问题的造型）

请参阅此琴演示如何做你想要的一切，而不插入任何其它元素。我发现没有必要甚至一个DIV的任何地方。

注：我最初使用float:left为这个问题做出的回答正确排队。然而，这引起了IE渲染刚出的答案，而不是离开的问题数量。我切换到使用display:inline-block ，现在一切都在IE浏览器的工作原理也是如此。

评论：

我清理样式表，其中有部分路段重复和冲突的样式规则。我删除不必要的规则。
我创建使用类分离的问题群体的线，我也做了它应用到一个问题，而不是底部的上边框，这样就可以使用它，即使有结束的一组隐藏的问题，因为一个隐藏的问题可能永远不会开始一个组。有没有需要额外的元素有边界。
在我看来，为“显示”复选框的标签应该是文字旁边，这样就可以单击该文本，以检查和取消选中该复选框。因此，我增加了一个“问题”类是问题的项目，而不是使用一个标签。您必须应用式“问题”的问题，使他们正常的风格。您可以应用到标签元素（这是别的东西或没有），或者你可以使用一个跨度或其他元素包含文本时，它不是一个标签。
IE 7愣神提出的数字在该行的底部，即使问题是风格与vertical-align:top 。我不知道如何解决，在这个时间，但它可能是在CSS怪癖比我的更多的专家一个问题。
IE不处理“隐藏”的方法非常好，占用额外的空间，然后揭示不显示子元素的情况下，所以就用绝对定位代替（其通过取出来的文件流的，具有相同的效果）。看到它是如何工作的CSS。
我修改你应用显示脚本的方式。不用手动连接最多各个项目，而不是我把数据值的复选框本身，然后在准备好时我使用适当的电缆铺设工作页面。现在，你可以通过添加一个ID，发现问题有透露更多的问题复选框（或使用类，而不是是否需要显示一个超过一次），并像数据的expando属性data-togglehidden="l4"指定该ID来切换正确的复选框元素。无需脚本修改。
它看起来像你一点可能有“DIV-炎”，这是倍增的div所有的地方的倾向。没必要不好意思，我有DIV-ITIS过，当我是新来的HTML开发。你会成长出来的，由于这样的经历。在一般情况下，你应该使用正常的非DIV页面元素和直接他们的风格，而不是换东西在申报单和造型的。当你需要的款式一组相关的功能，或针对不同的元素提供了一个盒子的div是有用的。你可以使用div的不当一个提示是，当他们只在他们的单个项目（尤其是内部的div）。有时候这是必要的，但问自己：我可以移动的风格，以父母或子女元素呢？
我需要知道更多关于你提到的，而且“页”的工作原理是在原始的HTML标记。有在HTML页面没有，打印HTML只有当。所以我不太清楚这意味着什么或如何风格你的网页你。

这里是清理的HTML，无需OL和李之间的附加元素：

<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');
                }
            });
        }
    });