Css “不必要的”；“空白”；导航栏周围的空间_Css_Positioning_Navbar

Css “不必要的”；“空白”；导航栏周围的空间

css

Css “不必要的”；“空白”；导航栏周围的空间,css,positioning,navbar,Css,Positioning,Navbar,因此，我对css/HTML非常陌生（两个月左右），我正在一个网站的主页上工作，该主页由标题图像、Youtube嵌入式播放器和导航栏组成。顺便说一句，第一次在这里发帖花了我一段时间，但我最终还是设法将我的网站居中/自动对齐，对任何浏览器使用“包装器”，或者如果你要放大和缩小浏览器，它将始终保持居中。现在我设法做到了这一点，但我的问题是导航栏的末端似乎有这个不必要的空白/空白，就像整个导航栏比实际的导航链接延伸得更远，这样就创建了一个我不想要的底部滚动条。下面会有一些图片，但我能告诉你的是当我在浏览

因此，我对css/HTML非常陌生（两个月左右），我正在一个网站的主页上工作，该主页由标题图像、Youtube嵌入式播放器和导航栏组成。顺便说一句，第一次在这里发帖花了我一段时间，但我最终还是设法将我的网站居中/自动对齐，对任何浏览器使用“包装器”，或者如果你要放大和缩小浏览器，它将始终保持居中。现在我设法做到了这一点，但我的问题是导航栏的末端似乎有这个不必要的空白/空白，就像整个导航栏比实际的导航链接延伸得更远，这样就创建了一个我不想要的底部滚动条。下面会有一些图片，但我能告诉你的是当我在浏览器中突出显示它的时候。如果有人能帮我解决这个问题，这样我就不必有一个底部滚动条，那将非常感谢，谢谢！[！[在这里，您可以看到导航栏右侧的所有空白区域

]

这是CSS

<style>

*{  
margin:0;  
padding:0;  
}  

body{  
text-align:center; /*For IE6 Shenanigans*/  
}  

#wrapper{  
width:960px;  
margin:0 auto;  
text-align:left;  
}   


#navigation   {
    position:relative;
    left:100px;
    top:10px

}

#navigation li {
    list-style: none;
    display: block;
    float: left;
    margin: .5em;

<!--spacing between navbar-->
   padding-right: 20px;
   padding-left: 25px;

}


#navigation li a {   
    display: block;
    text-decoration: none;
    font-family: arial, sans-serif;
    color: #000000;
    font-size: 1.09em;
    margin: -.01em;
}

#navigation li a:hover {
color: #0000FF;
    text-decoration: underline;
}





#video1
{
    margin-left:83px;
    margin-top:40px;
    position:relative;
}


#mainlogo {
    position:relative;
    display: inline;
    left:300px;
    top:15px;
}





 /**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


</style>


*{  
保证金：0；
填充：0；
}  
正文{
文本对齐：居中；/*用于IE6的诡计*/
}  
#包装器{
宽度：960px；
保证金：0自动；
文本对齐：左对齐；
}   
#航行{
位置：相对位置；
左：100px；
顶部：10px
}
#导航李{
列表样式：无；
显示：块；
浮动：左；
边缘：.5em；
右边填充：20px；
左侧填充：25px；
}
#导航LIA{
显示：块；
文字装饰：无；
字体系列：arial，无衬线；
颜色：#000000；
字号：1.09em；
边缘：-.01em；
}
#导航李a：悬停{
颜色：#0000FF；
文字装饰：下划线；
}
#视频1
{
左边距：83px；
边缘顶端：40px；
位置：相对位置；
}
#主标志{
位置：相对位置；
显示：内联；
左：300px；
顶部：15px；
}
/**
*Eric Meyer的重置CSS v2.0(http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/*旧浏览器的HTML5显示角色重置*/
文章，旁白，细节，图表，
页脚、页眉、H组、菜单、导航、节{
显示：块；
}
身体{
线高：1；
}
ol，ul{
列表样式：无；
}
区块报价，q{
报价：无；
}
blockquote:before，blockquote:after，
问：之前，问：之后{
内容：''；
内容：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}

这是HTML

</head>




<body>
<div id="wrapper">


<div id="mainlogo">
 <a href="http://s1287.photobucket.com/user/jakecan13/media/HeaderTest-
    1_zps78d21de6.png.html" target="_blank"><img 
   src="http://i1287.photobucket.com/albums/a628/jakecan13/HeaderTest-
1_zps78d21de6.png"  alt=404" height=55" width=370" photo HeaderTest-
1_zps78d21de6.png"/></a>

</div>





<ul id="navigation">
<li><a href="#Video">Video</a></li>
<li><a href="http://breakfastcircle.tumblr.com/">Photo</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#Store">Store</a></li>
</ul>



<div id="video1">
<iframe src="http://www.youtube.com/embed/GUEZCxBcM78?rel=0" width="800" height="500"
frameborder="0" allowfullscreen></iframe>

</div>


</div>

</body>
</html>

问题在于，您将导航栏放置在这一行的额外100像素上：

#navigation{
left: 100px;
}

如果你真的需要导航到这一步，请在导航中添加一个

float:left

属性，非常感谢Evan，现在我的问题都解决了。我希望。然后我使用了“padding”若要将其移动到所需位置，请更正接缝，到目前为止没有任何缺陷。希望我知道如何更多地使用此网站，为您的帐户提供一些积极反馈，谢谢！