元素超出页面答案

【问题标题】：Elements Extend Beyond Page元素超出页面
【发布时间】：2016-02-01 11:58:16
【问题描述】：

我在我的网站上移动了一些元素，发现其中两个元素不知不觉地延伸到了页面右边缘之外。该站点是 www.abadcaseofthedates.com，两个元素位于首屏：HTML8（站点搜索）和 ArchiveList（下拉归档菜单）。我意识到它们很可能会扩展这么远，因为它们是 column-center-inner 的子级，但我不知道如何缩小这两个元素的扩展（但不是 column-center- 中的所有其他元素）内）离开页面的一侧。

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

博客存档1：

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

【问题讨论】：

标签： html css border padding margins

【解决方案1】：

您的第一个问题是您的元素在您的锚标记内。当您尝试单击它时，您将获得与 DOM 中的前一个元素相同的效果。我真的不知道你的日期选择器发生了什么，但如果你发布你的代码，我相信我们可以弄清楚！

这将修复侧滚动 --

CSS：

html {
 overflow-x: hidden;
}

【讨论】：

太棒了。谢谢。我真的很感谢你的帮助。请记住，我仍在学习，但我感谢您的耐心。您需要查看多少代码？我可以发布全部或部分内容，但最有帮助的是什么？
它们有效，但它们超出了页面的边缘。页面可以从一边滚动到另一边（我不想要），因为元素无形地延伸到右边缘之外。
将 overflow-x: hidden 添加到你的 CSS 中。这将消除侧滚动
试过了：#HTML8 { z-index: 1;位置：相对；顶部：65px；左：400px；溢出-x：隐藏； } #HTML8 .title { 溢出-x：隐藏 } #HTML8 #cse-search-box { 溢出-x：隐藏； } 也许我把它添加到了错误的地方？
完全使用我给你的。不要将其应用于您的 div，而是应用于整个页面。而不是 #HTML8 使用 -- html { overflow-x: hidden; }