元素扩展超越页面

我正在移动我的网站上的一些元素，并发现其中的两个无形地延伸超出页面的右边缘。该网站是www.abadcaseofthedates.com，这两个要素位于上方：HTML8（网站搜索）和ArchiveList（下拉归档菜单）。我意识到，由于他们是列中心内的子女，他们可能会将这种扩展延伸到很远，但我无法弄清楚如何缩小这两个元素的扩展（但不是列中心 - 内部）离开页面的一侧。元素扩展超越页面

HTML8：

<div class="widget HTML" id="HTML8"> 
<h2 class="title">Search Site</h2> 
<div class="widget-content"> 
<form action="http://www.google.com" id="cse-search-box" target="_blank" _lpchecked="1"> 
    <div> 
    <input type="hidden" name="cx" value="partner-pub-8645914820193959:3645685348"> 
    <input type="hidden" name="ie" value="UTF-8"> 
    <input type="text" name="q" size="25" style="background-image: url(https://www.google.com/cse/static/en/google_custom_search_watermark.gif); background-color: rgb(255, 255, 255); background-position: 0% 50%; background-repeat: no-repeat no-repeat;"> 
    <input type="submit" name="sa" value="Search"> 
    </div> 
<input name="siteurl" type="hidden" value="www.abadcaseofthedates.com/"> <input name="ref" type="hidden" value="www.abadcaseofthedates.com/"><input name="ss" type="hidden" value=""></form> 

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script> 
</div> 
<div class="clear"></div> 
<span class="widget-item-control"> 
<span class="item-control blog-admin"> 
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=3186499665856075184&amp;widgetType=HTML&amp;widgetId=HTML8&amp;action=editWidget&amp;sectionId=main" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML8&quot;));" target="configHTML8" title="Edit"> 
<img alt="" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18"> 
</a> 
</span> 
</span> 
<div class="clear"></div> 
</div>

HTML8 CSS：

#HTML8 { 
z-index: 1; 
position: relative; 
top: 65px; 
left: 400px; 
}

BlogArchive1：

<div class="widget BlogArchive" id="BlogArchive1"> 
<div class="widget-content"> 
<div id="ArchiveList"> 
<div id="BlogArchive1_ArchiveList"> 
<select id="BlogArchive1_ArchiveMenu"> 
<option value=""> 
</option> 
<option value="http://www.abadcaseofthedates.com/2015_11_01_archive.html">November 2015 (1)</option> 
<option value="http://www.abadcaseofthedates.com/2015_10_01_archive.html">October 2015 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2015_09_01_archive.html">September 2015 (30)</option> 
<option value="http://www.abadcaseofthedates.com/2015_08_01_archive.html">August 2015 (32)</option> 
<option value="http://www.abadcaseofthedates.com/2015_07_01_archive.html">July 2015 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2015_06_01_archive.html">June 2015 (30)</option> 
<option value="http://www.abadcaseofthedates.com/2015_05_01_archive.html">May 2015 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2015_04_01_archive.html">April 2015 (30)</option> 
<option value="http://www.abadcaseofthedates.com/2015_03_01_archive.html">March 2015 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2015_02_01_archive.html">February 2015 (28)</option> 
<option value="http://www.abadcaseofthedates.com/2015_01_01_archive.html">January 2015 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2014_12_01_archive.html">December 2014 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2014_11_01_archive.html">November 2014 (30)</option> 
<option value="http://www.abadcaseofthedates.com/2014_10_01_archive.html">October 2014 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2014_09_01_archive.html">September 2014 (30)</option> 
<option value="http://www.abadcaseofthedates.com/2014_08_01_archive.html">August 2014 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2014_07_01_archive.html">July 2014 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2014_06_01_archive.html">June 2014 (32)</option> 
<option value="http://www.abadcaseofthedates.com/2014_05_01_archive.html">May 2014 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2014_04_01_archive.html">April 2014 (30)</option> 
<option value="http://www.abadcaseofthedates.com/2014_03_01_archive.html">March 2014 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2014_02_01_archive.html">February 2014 (32)</option> 
<option value="http://www.abadcaseofthedates.com/2014_01_01_archive.html">January 2014 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2013_12_01_archive.html">December 2013 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2013_11_01_archive.html">November 2013 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2013_10_01_archive.html">October 2013 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2013_09_01_archive.html">September 2013 (30)</option> 
<option value="http://www.abadcaseofthedates.com/2013_08_01_archive.html">August 2013 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2013_07_01_archive.html">July 2013 (35)</option> 
<option value="http://www.abadcaseofthedates.com/2013_06_01_archive.html">June 2013 (38)</option> 
<option value="http://www.abadcaseofthedates.com/2013_05_01_archive.html">May 2013 (33)</option> 
<option value="http://www.abadcaseofthedates.com/2013_04_01_archive.html">April 2013 (30)</option> 
<option value="http://www.abadcaseofthedates.com/2013_03_01_archive.html">March 2013 (33)</option> 
<option value="http://www.abadcaseofthedates.com/2013_02_01_archive.html">February 2013 (33)</option> 
<option value="http://www.abadcaseofthedates.com/2013_01_01_archive.html">January 2013 (39)</option> 
<option value="http://www.abadcaseofthedates.com/2012_12_01_archive.html">December 2012 (33)</option> 
<option value="http://www.abadcaseofthedates.com/2012_11_01_archive.html">November 2012 (30)</option> 
<option value="http://www.abadcaseofthedates.com/2012_10_01_archive.html">October 2012 (35)</option> 
<option value="http://www.abadcaseofthedates.com/2012_09_01_archive.html">September 2012 (32)</option> 
<option value="http://www.abadcaseofthedates.com/2012_08_01_archive.html">August 2012 (32)</option> 
<option value="http://www.abadcaseofthedates.com/2012_07_01_archive.html">July 2012 (32)</option> 
<option value="http://www.abadcaseofthedates.com/2012_06_01_archive.html">June 2012 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2012_05_01_archive.html">May 2012 (34)</option> 
<option value="http://www.abadcaseofthedates.com/2012_04_01_archive.html">April 2012 (33)</option> 
<option value="http://www.abadcaseofthedates.com/2012_03_01_archive.html">March 2012 (45)</option> 
<option value="http://www.abadcaseofthedates.com/2012_02_01_archive.html">February 2012 (69)</option> 
<option value="http://www.abadcaseofthedates.com/2012_01_01_archive.html">January 2012 (90)</option> 
<option value="http://www.abadcaseofthedates.com/2011_12_01_archive.html">December 2011 (98)</option> 
<option value="http://www.abadcaseofthedates.com/2011_11_01_archive.html">November 2011 (92)</option> 
<option value="http://www.abadcaseofthedates.com/2011_10_01_archive.html">October 2011 (103)</option> 
<option value="http://www.abadcaseofthedates.com/2011_09_01_archive.html">September 2011 (102)</option> 
<option value="http://www.abadcaseofthedates.com/2011_08_01_archive.html">August 2011 (112)</option> 
<option value="http://www.abadcaseofthedates.com/2011_07_01_archive.html">July 2011 (97)</option> 
<option value="http://www.abadcaseofthedates.com/2011_06_01_archive.html">June 2011 (75)</option> 
<option value="http://www.abadcaseofthedates.com/2011_05_01_archive.html">May 2011 (117)</option> 
<option value="http://www.abadcaseofthedates.com/2011_04_01_archive.html">April 2011 (160)</option> 
<option value="http://www.abadcaseofthedates.com/2011_03_01_archive.html">March 2011 (184)</option> 
<option value="http://www.abadcaseofthedates.com/2011_02_01_archive.html">February 2011 (160)</option> 
<option value="http://www.abadcaseofthedates.com/2011_01_01_archive.html">January 2011 (130)</option> 
<option value="http://www.abadcaseofthedates.com/2010_12_01_archive.html">December 2010 (99)</option> 
<option value="http://www.abadcaseofthedates.com/2010_11_01_archive.html">November 2010 (70)</option> 
<option value="http://www.abadcaseofthedates.com/2010_10_01_archive.html">October 2010 (45)</option> 
<option value="http://www.abadcaseofthedates.com/2010_09_01_archive.html">September 2010 (32)</option> 
<option value="http://www.abadcaseofthedates.com/2010_08_01_archive.html">August 2010 (31)</option> 
<option value="http://www.abadcaseofthedates.com/2010_07_01_archive.html">July 2010 (32)</option> 
<option value="http://www.abadcaseofthedates.com/2010_06_01_archive.html">June 2010 (38)</option> 
<option value="http://www.abadcaseofthedates.com/2010_05_01_archive.html">May 2010 (39)</option> 
<option value="http://www.abadcaseofthedates.com/2010_04_01_archive.html">April 2010 (47)</option> 
<option value="http://www.abadcaseofthedates.com/2010_03_01_archive.html">March 2010 (60)</option> 
<option value="http://www.abadcaseofthedates.com/2010_02_01_archive.html">February 2010 (57)</option> 
<option value="http://www.abadcaseofthedates.com/2010_01_01_archive.html">January 2010 (63)</option> 
<option value="http://www.abadcaseofthedates.com/2009_12_01_archive.html">December 2009 (67)</option> 
<option value="http://www.abadcaseofthedates.com/2009_11_01_archive.html">November 2009 (76)</option> 
<option value="http://www.abadcaseofthedates.com/2009_10_01_archive.html">October 2009 (84)</option> 
<option value="http://www.abadcaseofthedates.com/2009_09_01_archive.html">September 2009 (85)</option> 
</select> 
</div> 
</div> 
<div class="clear"></div> 
<span class="widget-item-control"> 
<span class="item-control blog-admin"> 
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=3186499665856075184&amp;widgetType=BlogArchive&amp;widgetId=BlogArchive1&amp;action=editWidget&amp;sectionId=main" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;BlogArchive1&quot;));" target="configBlogArchive1" title="Edit"> 
<img alt="" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18"> 
</a> 
</span> 
</span> 
<div class="clear"></div> 
</div> 
</div>

博客归档CSS：

#ArchiveList { 
position: relative; 
bottom: 1px; 
left: 350px; 
z-index: 2; 
}

来源

2015-11-01 JMG114

你的第一个问题是你的元素是你的锚标记内。当您尝试点击它时，您将获得与DOM中的上一个元素相同的效果。我无法确切地告诉你的日期选择器发生了什么，但是如果你发布了你的代码，我相信我们可以弄明白！

这将解决该侧滚动 -

CSS：

html { 
overflow-x: hidden; 
}

来源

2015-11-01 14:51:52 Jase

大。谢谢。我非常感谢你的帮助。请记住，我仍然在学习，因为我正在走，但我感谢你的耐心。你需要看多少代码？我可以发布全部或部分内容，但最有用的是什么？ – JMG114

他们现在都在工作。什么修正了它？ – Jase

他们工作，但他们超出了页面的边缘。页面可以从一侧滚动到另一侧（我不想），因为这些元素不可见地延伸到右边缘之外。 – JMG114

元素扩展超越页面

回答

相关问题