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，但不在屏幕中間，alredy固定為距屏幕左邊緣40px

在此處輸入圖片說明

但是，如果我從heder.php中刪除“第四個項目”，請在此處輸入圖片描述

我該如何解決這個問題？

Answer 1

因此，您希望菜單位於中間，使每個項目的寬度保持現在不變，對吧？ 如果是這樣，您可以將#menu的屬性'margin'的值設置為'！important'，如下所示

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

代替

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

這是因為，將'！important'的margin-left和margin-right屬性設置為0會覆蓋#menu的邊距。