gpt4 book ai didi

html - SSI 元素超出页面宽度

转载 作者:行者123 更新时间:2023-11-28 12:30:24 26 4
gpt4 key购买 nike

我通过 SSI 插入页面的 html 菜单向左延伸超出了页面的硬编码宽度,我不明白为什么...

如果你看我的代码,#menu id 是问题所在,因为它正确 float (float:right;)但它的宽度似乎被某些东西覆盖了......我无法找出是什么正在覆盖它......我已经检查了所有会影响#menu 的属性,但没有任何影响......

这是清楚的网页:http://unifiedforunifat.com/redesign/homepage.html

这是插入菜单的主页的 css:

body{
font-family: "Trebuchet MS", Helvetica, sans-serif;
margin: 0;
padding: 0;
padding-top: 10px;
}

html{
height: 100%;
}

#wrapper{
width: 900px;
min-height: 100%;
height: auto;
margin: 0 auto -4em;
}

#header{
position: relative;
top: 0;
left: 0;
margin-bottom: 1px;
}

这里是对应的html:

<body>
<div id="wrapper">
<div id="header">
<!--#include virtual="/menus/menu.html" -->
</div>

这是菜单页面的CSS:

#menu-wrapper{
position: relative;
width: 900px;
margin: 0 auto;
height: 140px;
}

#logo{
background:url('http://www.unifiedforuganda.com/resources/u4ulogo.jpg') no-repeat;
height: 108px;
width: 200px;
position: relative;
top: 3px;
background-position: 0 0;
float: left;
}

#logo span{
position: absolute;
top:0; left:0; bottom:0; right:0;
background:url('file:///Volumes/Despotos/Users/nojohnny101/Documents/Dropbox/Unified%20for%20UNIFAT/website/resources/u4ulogo.jpg') no-repeat;
background-position: -200px 0;
}

#logo:hover span{
opacity: 1;
}


.social{
position: relative;
margin: 50px 0 0 0;
width: 136px;
float: right;
overflow: hidden;
display: block;
}
#menu{
position: relative;
top: 0;
right: 0;
list-style: none;
display: block;
overflow: hidden;
width: 100%;
margin-top: 0;
padding-top: 4px;
border-top: 1px solid black;
float: right;
}

然后这是菜单页面的 html:

<div id="menu-wrapper">
<div class="menu-header">
<a href="http://unifiedforunifat.com/redesign/homepage.html" id="logo" class="imglink"><span></span></a>
</div>
<div class="social">
<a href="https://www.facebook.com/UnifiedforUNIFAT" id="facebook" target="_blank"><span></span></a>
<a href="https://twitter.com/unified4unifat" id="twitter" target="_blank"><span></span></a>
<a href="http://unifiedforunifat.wordpress.com/" id="wordpress" target="_blank"><span></span></a>
<a href="https://vimeo.com/u4u" id="vimeo" target="_blank"><span></span></a>

</div>
<div>
<ul id="menu">
<li class="active"><a href="#">DONATE</a></li>
<li class="active"><a href="#">ABOUT US</a></li>
<li class="active"><a href="#">MEDIA</a></li>
<li class="active"><a href="#">US MOVEMENT</a></li>
<li class="active"><a href="http://unifiedforunifat.com/redesign/ugandaprograms.html">UGANDA PROGRAMS</a></li>
</ul>
</div>

任何帮助将不胜感激!

最佳答案

所以我找到了答案...我最终做的是把 overflow: hidden; #menu-wrapper id 上的属性......我不知道我是否完全理解为什么这有助于隐藏页面左侧的额外宽度,即使指定了硬宽度(900px)并且边框实际上是应用于#menu id 而不是#menu-wrapper id.....

但是问题....谢谢@MrLister

关于html - SSI 元素超出页面宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18281676/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com