元素擴展超越頁面

我正在移動我的網站上的一些元素，並發現其中的兩個無形地延伸超出頁面的右邊緣。該網站是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

元素擴展超越頁面

回答

相關問題