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 中删除 "item four fluid" 得到这个 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 的边距。

css3 保证金不起作用？

css3 margin doesn't work?

html

css

php

semantic-ui