我已经四处寻找了许多解决方案,我目前正在重做我拥有的网站的代码,因为我在每个HTML页面上单独布置了我所有的CSS。最终我有太多的页面需要处理,我决定制作一个样式表来清理它,但我的一切都是一团糟。缩进、注释等...
目前,我正在网站上处理我的导航栏,但由于某种我无法弄清楚的原因(我已经尝试了很多事情(,该栏正好位于中间,在栏的顶部、左侧和右侧留下少量空白。这是 HTML:
ul { /* unordered list properties */
list-style-type: none; /*takes out bullet points */
margin: 0; /* scaling */
padding: 0; /* scaling */
overflow: hidden; /* clipping rules: https://www.w3schools.com/cssref/pr_pos_overflow.asp */
background-color: #0c1f2e; /* colour */
}
li { /* list item properties */
float: left; /* move item to the left */
font-size: 14px; /* set the font size to 14 pixels */
}
li a { /* vertical style */
display: block; /* display style */
color: #ffffff; /* text colour */
text-align: center; /* centres the text */
padding: 19px; /* vertical padding */
text-decoration: none; /* remove any text effects */
font-family: 'Dosis', sans-serif; /* change the font to selected font: Dosis */
}
li a:hover { /* vertical style items when hovered upon by cursor properties */
background-color: #639ddf; /* set the background colour */
font-size: 20px; /*set the font size to 20 pixels */
}
<nav> <!-- begin navigation element -->
<div id="menu"> <!-- create and start new element with the id: menu -->
<ul> <!-- begin unordered list -->
<li><a href="index.html">Home</a></li><!-- list items -->
<li><a href="WebsiteCompetitions.html">Competitions</a></li>
<li><a href="WebsiteBuilds.html">Builds</a></li>
<li><a href="WebsiteImages.html">Images</a></li>
<li><a href="WebsiteVideos.html">Videos</a></li>
<li><a href="WebsiteComm.html">Fight Club</a></li>
<li><a href="WebsiteArticles.html">Articles</a></li>
<li><a href="/mybb">Forums</a></li>
<li><a href="WebsiteTools.html">Tools</a></li>
<li><a href="WebsiteNews.html">News</a></li>
<li><a href="WebsiteOffers.html">Shop</a></li>
<li><a href="cooperators.html">Allies</a></li>
<li><a href="WebsiteMore.html">More</a></li>
</ul> <!-- end the unordered list -->
</div> <!-- end the 'menu' element -->
</nav> <!-- end navigation element -->
提前感谢大家,我希望我提供了足够的信息,请不要对我的过度评论或任何事情过于苛刻,只是将这些意见留给自己。至于我的问题结构和代码,请纠正我做错的任何事情,并指出我如何解决。非常感谢您抽出宝贵时间阅读本文,
这是你要找的吗?
链接到 JSFiddle
如果是这样,请在您的 CSS 中。添加此
body {
margin: 0px;
}
我没有一个解决方案对我有用,但我找到了一个适合我的解决方案。在我的 CSS 中:
.navbar{
margin-left: -15px;
margin-right: -15px;
}
似乎我的边距大约有 15 像素,只是我无法通过将边距设置为 0 来摆脱。
看起来浏览器默认的 css 样式正在向正文添加margin: 8px;
。要删除它,请将其添加到您的 css 中:
body {
margin: 0;
}
导航边距设置为 0px 并将正文填充设置为 0px; 应该有效。
我尝试了 left:0;它就像一个魅力!