我正在 Wordpress 中设置我的网站，但我遇到了一个非常烦人的问题。
我有一个带有一些小部件的很棒的站点栏。当我不实现我的时事通讯框(这是一个 Aweber 脚本 - 见下文)时，它看起来很棒。但是，当我实现它时，HTML 似乎出错了。
但是，当我将时事通讯框放置在最低的小部件中时，它看起来也很棒。问题是，我需要将时事通讯放在更高的位置，以便获得更多线索。
图形示例:
当通讯箱位于底部时(一切看起来都很棒): http://i52.tinypic.com/2w6gb3c.jpg
当通讯箱位于它应该位于的位置时(一切看起来都很糟糕):http://i56.tinypic.com/no6ntd.jpg
因此，我的问题是:我究竟该如何解决这个问题？我已经尝试修复 HTML 列表，但它看起来不像是缺少结束标记。而且 HTML 似乎有效.
技术资料
Aweber 脚本是:
<script type="text/javascript" src="http://forms.aweber.com/form/42/XXX.js"></script>
这是指看起来像这样的 HTML 表单:
<!-- AWeber Web Form Generator 3.0 -->
<style type="text/css">
#af-form-1560005742 .af-body .af-textWrap{width:98%;display:block;float:none;}
#af-form-1560005742 .af-body a{color:#700909;text-decoration:underline;font-style:normal;font-weight:normal;}
#af-form-1560005742 .af-body input.text, #af-form-1560005742 .af-body textarea{background-color:#FFFFFF;border-color:#BD965A;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-1560005742 .af-body input.text:focus, #af-form-1560005742 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;}
#af-form-1560005742 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-1560005742 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:repeat-y;background-position:center left;background-image:url("http://forms.aweber.com/images/forms/memo/khaki/body.png");color:#000000;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-1560005742 .af-footer{padding-bottom:45px;padding-top:1px;padding-right:34px;padding-left:34px;background-color:transparent;background-repeat:no-repeat;background-position:bottom left;background-image:url("http://forms.aweber.com/images/forms/memo/khaki/footer.png");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#000000;font-size:12px;font-family:Verdana, sans-serif;}
#af-form-1560005742 .af-header{padding-bottom:1px;padding-top:20px;padding-right:34px;padding-left:34px;background-color:transparent;background-repeat:no-repeat;background-position:top left;background-image:url("http://forms.aweber.com/images/forms/memo/khaki/header.png");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#8A1F0A;font-size:16px;font-family:Verdana, sans-serif;}
#af-form-1560005742 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}
#af-form-1560005742 .af-quirksMode{padding-right:32px;padding-left:34px;}
#af-form-1560005742 .af-standards .af-element{padding-right:32px;padding-left:34px;}
#af-form-1560005742 .bodyText p{margin:1em 0;}
#af-form-1560005742 .buttonContainer input.submit{background-image:url("http://forms.aweber.com/images/auto/gradient/button/900.png");background-position:top left;background-repeat:repeat-x;background-color:#790000;border:1px solid #790000;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}
#af-form-1560005742 .buttonContainer input.submit{width:auto;}
#af-form-1560005742 .buttonContainer{text-align:left;}
#af-form-1560005742 body,#af-form-1560005742 dl,#af-form-1560005742 dt,#af-form-1560005742 dd,#af-form-1560005742 h1,#af-form-1560005742 h2,#af-form-1560005742 h3,#af-form-1560005742 h4,#af-form-1560005742 h5,#af-form-1560005742 h6,#af-form-1560005742 pre,#af-form-1560005742 code,#af-form-1560005742 fieldset,#af-form-1560005742 legend,#af-form-1560005742 blockquote,#af-form-1560005742 th,#af-form-1560005742 td{float:none;color:inherit;position:static;margin:0;padding:0;}
#af-form-1560005742 button,#af-form-1560005742 input,#af-form-1560005742 submit,#af-form-1560005742 textarea,#af-form-1560005742 select,#af-form-1560005742 label,#af-form-1560005742 optgroup,#af-form-1560005742 option{float:none;position:static;margin:0;}
#af-form-1560005742 div{margin:0;}
#af-form-1560005742 fieldset{border:0;}
#af-form-1560005742 form,#af-form-1560005742 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1560005742 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}
#af-form-1560005742 input,#af-form-1560005742 button,#af-form-1560005742 textarea,#af-form-1560005742 select{font-size:100%;}
#af-form-1560005742 p{color:inherit;}
#af-form-1560005742 select,#af-form-1560005742 label,#af-form-1560005742 optgroup,#af-form-1560005742 option{padding:0;}
#af-form-1560005742 table{border-collapse:collapse;border-spacing:0;}
#af-form-1560005742 ul,#af-form-1560005742 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}
#af-form-1560005742,#af-form-1560005742 .quirksMode{width:275px;}
#af-form-1560005742.af-quirksMode{overflow-x:hidden;}
#af-form-1560005742{background-color:transparent;border-color:transparent;border-width:1px;border-style:none;}
#af-form-1560005742{overflow:hidden;}
.af-body .af-textWrap{text-align:left;}
.af-body input.image{border:none!important;}
.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}
.af-body input.text{width:100%;float:none;padding:2px!important;}
.af-body.af-standards input.submit{padding:4px 12px;}
.af-clear{clear:both;}
.af-element label{text-align:left;display:block;float:left;}
.af-element{padding:5px 0;}
.af-form-wrapper{text-indent:0;}
.af-form{text-align:left;margin:auto;}
.af-header,.af-footer{margin-bottom:0;margin-top:0;padding:10px;}
.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}
.lbl-right .af-element label{text-align:right;}
body {
}
</style>
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" target="_new" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="XXX" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="youfirmnet" />
<input type="hidden" name="redirect" value="http://www.youfirm.net/wait-you-are-not-done-yet/" id="XXX" />
<input type="hidden" name="meta_adtracking" value="XXXX" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1560005742" class="af-form"><div id="af-header-XXX" class="af-header"><div class="bodyText"><p><span class="Apple-style-span" style="font-size: 18px;"><strong>Quality Newsletter:</strong></span></p>
<p><span class="Apple-style-span" style="font-size: 13px;">I write when I've something <em>important to share</em>. <strong>No</strong> daily emails and <strong>no</strong> spam. </span><span class="Apple-style-span" style="font-size: 13px;"><strong>By signing up</strong>, you will receive my *MUST READ* e-book: How the world of business is changing.</span></p></div></div>
<div id="af-body-XXX" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-23759938">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-XX" type="text" name="email" value="" tabindex="500" />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Submit" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
<div id="af-footer-XX" class="af-footer"><div class="bodyText"><p> </p></div></div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=jKxsDAwMrOwsTA==" alt="" /></div>
</form>
<script type="text/javascript">
<!--
(function() {
var IE = /*@cc_on!@*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-X")) {
document.getElementById("af-form-XX").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-x")) {
document.getElementById("af-body-x").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-x")) {
document.getElementById("af-header-x").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-x")) {
document.getElementById("af-footer-X").className = "af-footer af-quirksMode";
}
}
})();
-->
</script>
<!-- /AWeber Web Form Generator 3.0 -->
UGLY 版本的 HTML:
<div class="sidebar_widgets">
<ul>
<li id="categories-3" class="widget widget_categories"><h2 class="widgettitle">Blog Categories</h2><div class="widget_inner"> <ul>
<li class="cat-item cat-item-4"><a href="http://www.youfirm.net/category/cro/" title="When you have used either resources or money to attract visitors, you need to make money of these visitors. This category is all about how to convert the visitors into buyers.">Conversion Rate Optimization</a> (5)
</li>
<li class="cat-item cat-item-12"><a href="http://www.youfirm.net/category/experiments/" title="In this category a variety of experiments I've performed myself is shown.">Experiments</a> (1)
</li>
<li class="cat-item cat-item-11"><a href="http://www.youfirm.net/category/business/" title="This category covers some general advice and ideas. There are loads of different ideas you can use in your business - no matter what you are doing.">General Advice</a> (7)
</li>
<li class="cat-item cat-item-5"><a href="http://www.youfirm.net/category/gettingvisitors/" title="Getting a large amount of visitors is essential to any business - offline and online. In this category I cover new ideas and methods to get visitors. If you are looking for search engine optimization help, look under YouFirm Articles.">Getting Visitors</a> (5)
</li>
<li class="cat-item cat-item-9"><a href="http://www.youfirm.net/category/question-and-answers/" title="When people ask me questions using the Free advice page, I answer those questions. In this category you will see the questions asked and my answers to them.">Question and Answers</a> (7)
</li>
<li class="cat-item cat-item-3"><a href="http://www.youfirm.net/category/upsell/" title="To make more money, up-selling is very important. Getting customers will often be expensive, so when you have customers, it is essential you make money up-selling them. This is what makes the difference: Get customers to buy again and get them to buy more.">Upselling</a> (3)
</li>
<li class="cat-item cat-item-8"><a href="http://www.youfirm.net/category/website-feedback/" title="When people ask me about website feedback using the Free advice page, I tend to give some feedback! Here is some of the feedback posted.">Website Feedback</a> (2)
</li>
</ul>
</div></li><li id="text-4" class="widget widget_text"> <div class="textwidget"><script type="text/javascript" src="http://forms.aweber.com/form/42/1560005742.js"></script></div>
</div></li><li id="text-9" class="widget widget_text"><h2 class="widgettitle">YouFirm Membership</h2><div class="widget_inner"> <div class="textwidget"><b>This is the best I can offer</b>. This is my premium membership program which offers "how to" information. It covers how to get massive traffic, high conversions and generate massive up-sell.<br/><br/>
<a href="http://www.YouFirm.net/university" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://www.YouFirm.net']);" style="color:#9d080d; text-decoration: underline; font-weight:bold;">Read more about YouFirm University here</a>.</div>
</div></li> <li id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widgettitle">Recent Posts</h2><div class="widget_inner"> <ul>
<li><a href="http://www.youfirm.net/2011/08/is-social-media-really-for-anyone/" title="Is social media really for anyone?">Is social media really for anyone?</a></li>
<li><a href="http://www.youfirm.net/2011/08/buying-visitors-from-fiverr/" title="Buying visitors from Fiverr">Buying visitors from Fiverr</a></li>
<li><a href="http://www.youfirm.net/2011/08/do-the-unexpected/" title="Do the Unexpected">Do the Unexpected</a></li>
<li><a href="http://www.youfirm.net/2011/08/qr-codes-and-their-potential-exciting-designs/" title="QR Codes and their potential – Exciting designs">QR Codes and their potential – Exciting designs</a></li>
<li><a href="http://www.youfirm.net/2011/08/using-professional-newsletter-managers/" title="Using Professional Newsletter Managers">Using Professional Newsletter Managers</a></li>
<li><a href="http://www.youfirm.net/2011/08/q-is-it-easy-to-outrank-wikipedia-amazon-and-alike-in-google/" title="Q: Is it easy to outrank Wikipedia, Amazon and alike in Google?">Q: Is it easy to outrank Wikipedia, Amazon and alike in Google?</a></li>
<li><a href="http://www.youfirm.net/2011/08/310/" title="More and More Elderly People">More and More Elderly People</a></li>
<li><a href="http://www.youfirm.net/2011/08/getting-started-with-linkbuilding/" title="Getting started with linkbuilding">Getting started with linkbuilding</a></li>
<li><a href="http://www.youfirm.net/2011/08/what-are-personas-and-how-to-use-them/" title="What Are Personas and How to Use Them">What Are Personas and How to Use Them</a></li>
</ul>
</div></li><li id="text-8" class="widget widget_text"><h2 class="widgettitle">Who is behind YouFirm?</h2><div class="widget_inner"> <div class="textwidget">My name is Lars Holdgaard and I am a full time entrepreneur. Read all <a href="http://www.youfirm.net/about/" style="color:#9d080d; text-decoration: underline; font-weight:bold;">about me here</a>.<br/><br/>
<img src="http://i51.tinypic.com/24pe6gl.jpg" alt="Lars Holdgaard" title="Lars Holdgaard" width="150px" /></div>
</div></li> </ul>
</div>
</div>
</div>
完整的 CSS: http://www.youfirm.net/wp-content/themes/SereneLiteTheme/style.css
最佳答案
我正在以正确的方式发布解决方案。因此，如果它适合您，您可以接受它。
<li id="text-4" class="widget widget_text">
<div class="textwidget"><script type="text/javascript" src="http://forms.aweber.com/form/42/1560005742.js"></script></div>
</div>
</li>
问题是结束 </div>标签，它在 <li> 里面ID='text-4' 的标签。因此，您可能会很快找到它，只需查找具有该 ID 的元素并从中删除最后一个关闭的 div 标签。
所以它看起来像这样:
<li id="text-4" class="widget widget_text">
<div class="textwidget"><script type="text/javascript" src="http://forms.aweber.com/form/42/1560005742.js"></script></div>
</li>
此外，我鼓励您使用 http://validator.w3.org/在您的页面中查找更多错误。
关于使用 Aweber 解决 Wordpress 中的 HTML 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7105385/