0

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

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

这是一个工作小提琴

这是我的代码；

<!-- 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 行下，它可以工作，但按钮不会根据需要填充列（因为它不是全宽，因为它是一行 > 行）。

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

4

1 回答 1

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 columns），但该 div 在 form 标签之前关闭。我不确定您的理想布局是什么，所以我无法向您展示确切的解决方法，但是在靠近底部的区域中有太多关闭的 div 标签，您可以在这里获得所有评论。其中一些不应该在表单元素之后关闭。

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

于 2013-10-05T03:45:24.317 回答