Question

我已经找了很多解决方案，我正在重做我拥有的网站的代码，因为我已经在每个HTML页面上单独列出了所有CSS。最终我有太多的页面需要处理，我决定制作一个样式表来清理它，但我的一切都很糟糕。缩进，评论等...

目前，我正在网站上的导航栏上工作，但由于某些原因我无法弄清楚（我已经尝试了很多东西），这个栏正好位于中间位置酒吧顶部，左侧和右侧的少量空白区域。这是HTML：

＆＃13;

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 */
}

＆＃13;

    <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 -->

＆＃13;

提前感谢所有人，我希望我已经提供了足够的信息，请不要过于苛刻我的过度评论或任何只是保留这些意见给自己。至于我的问题结构和代码，请纠正我做错的任何事情，并指出我如何解决。非常感谢您花时间阅读本文，

Answer 1

这是你正在寻找的吗？

Link to JSFiddle

如果是这样，请在CSS中。添加此

getAttribute("data-errorqtip").getText()

Answer 2

看起来浏览器默认的css样式正在向正文添加margin: 8px;。要删除它，请将其添加到您的css：

body {
    margin: 0;
}

Answer 3

将导航器上的边距设置为0px并将主体填充设置为0px;应该有用。

Answer 4

我没有为我工作过的解决方案，但是我找到了一个可行的解决方案。在我的CSS中：

.navbar{
  margin-left: -15px;
  margin-right: -15px;
}

好像我的边距只有15像素，只是我无法将边距设置为0。

Answer 5

我试过 left:0;它就像一个魅力！

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

5 个答案: