元素延伸超越页面

时间：2015-11-01 14:48:26

标签： html css border padding margins

我正在我的网站上移动一些元素，并发现其中两个元素无形地延伸到页面右边缘之外。该网站是www.abadcaseofthedates.com，两个元素在首屏：HTML8（网站搜索）和ArchiveList（下拉存档菜单）。我意识到他们可能会延伸到这一点，因为他们是列中心内部的孩子，但我无法弄清楚如何缩小这两个元素的扩展（但不是列中心的其他所有 - 在页面的一侧。

enter image description here
enter image description here

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>

Blog Archive CSS：

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

1 个答案:

答案 0 :(得分：0)

您的第一个问题是您的元素位于您的锚标记内。当您尝试单击它时，您将获得与DOM中前一个元素相同的效果。我无法确定您的日期选择器发生了什么，但如果您发布您的代码，我相信我们可以解决它！

这将修复侧面滚动 -

CSS：

html {
 overflow-x: hidden;
}
相关问题
最新问题