html - 基础表格 - 验证错误 "End div tag seen, but open elements"

Question

我正在尝试使用基础框架来设置表单样式，它不喜欢将表单的各个部分(即提交按钮)与一个全新的 ROW 分开。它抛出这些错误；

看到结束标记 div，但有开放元素。 323未闭合的元素形式。 296杂散结束标记形式。 329

Here is a working fiddle

这是我的代码；

<!-- Contact -->
<div class="row"> <!-- dreamweaver says these overlap or unclosed-->
<div class="large-12 small-centered columns"> <!-- dreamweaver says these overlap or unclosed-->
<div class="small-12 small-centered large-9 columns"> <!-- dreamweaver says these overlap or unclosed-->

<form method="post" action="#" id="contact_form">
<div class="row">
<div class="large-6 columns">
<label for="contact_name">Your Name<em>*</em></label>
<input type="text" id="contact_name" name="contact_name" class="required" />
</div>
<div class="large-6 columns">
<label for="contact_email">Your Email<em>*</em></label>
<input type="email"  id="contact_email" name="contact_email" class="required email">
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label for="contact_company">Company Name or Organization</label>
<input type="text" id="contact_company" name="contact_company"/>
</div>
<div class="large-6 columns">
<label for="contact_phone">Phone Number</label>
<input type="tel" id="contact_phone" name="contact_phone"/>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label for="contact_message">Your Message<em>*</em></label>
<textarea id="contact_message" name="contact_message" class="required"></textarea>
</div>
</div>
</div> <!-- line 323 - dreamweaver says these overlap or unclosed-->
</div> <!-- dreamweaver says these overlap or unclosed-->
</div> <!-- dreamweaver says these overlap or unclosed-->

<div class="row"> <!-- dreamweaver says these overlap or unclosed-->
<div class="large-4 small-centered columns"> <!-- dreamweaver says these overlap or unclosed-->
<input type="submit" name="contact_submit" class="medium button expand-fix no-border" value="SEND MESSAGE"/></form>
</div> <!-- dreamweaver says these overlap or unclosed-->
</div> <!-- dreamweaver says these overlap or unclosed-->

如果我将最后一行嵌套在第 323 行下，它可以工作，但按钮不会根据需要填充该列(因为它不是全宽，因为是一行 > 行)。

这让我很困惑!感谢您的关注!

Answer 1

您的输入元素之一未关闭:

<input type="email"  id="contact_email" name="contact_email" class="required email">

应该是:

<input type="email"  id="contact_email" name="contact_email" class="required email"/>

此外，更重要的是，您的表单标签开始于一个 div(small-12 small-centered large-9 列)，但该 div 在表单标签关闭之前关闭。我不确定您的理想布局是什么，所以我无法向您展示确切的修复方法，但在靠近底部的区域中有太多的结束 div 标签，您可以在其中获得所有评论。其中一些应该在表单元素之前关闭。

仔细检查您的代码，并确保您的元素被正确封闭，并且在先关闭其中一个子元素之前不要关闭该元素。