从导航栏的侧面和顶部删除空白区域



我已经四处寻找了许多解决方案,我目前正在重做我拥有的网站的代码,因为我在每个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;它就像一个魅力!

相关内容

  • 没有找到相关文章

最新更新