php - css3 边距不起作用？

Question

我使用语义 UI 创建导航栏，这是我的 header.php 代码

<div id="mainHead">
  <div class="ui pointing menu fluid four item inverted " id="menu">
    <a href="index.php" class="item">
      <i class="home icon"></i> Home
    </a>
    <a href="about.php" class="item">
      <i class="user icon"></i> About
    </a>
    <a href="portfolio.php" class="item">
      <i class="archive icon"></i> Portfolio
    </a>
    <a href="contact.php" class="item">
      <i class="mail icon"></i> Contact
    </a>
  </div>
  <div class="ui labeled icon button black">
    <i class="icon list layout"></i>
    Menu
  </div>
</div>

这是我的 style.css 代码

body {
  margin: 0;
  padding: 0;
  font-family: "helvetica", arial;
}

#mainHead {
  margin: 40px 40px 0 40px;
}

#menu {
  max-width: 1024px;
  margin: 0 auto;
}

导航栏已显示且最大宽度为 1024px，但不在屏幕中间，已固定为距屏幕左边缘 40px

enter image description here

但是如果我从 heder.php 中删除“元素四流体”得到这个 enter image description here

我该如何解决这个问题？

Answer 1

那么，您希望中​​间的菜单保持每个元素的宽度与现在相同，对吗？如果是这样，您可以将#menu 的属性“margin”的值设置为“!important”，如下所示

 #menu {
        max-width: 1024px;
        margin: 0 auto !important;
    }

代替

#menu {
        max-width: 1024px;
        margin: 0 auto;
    }

这是因为，将 margin-left 和 margin-right 属性设置为 0 并使用 '!important' 覆盖您的 #menu 边距。