html - CSS:事件类

Question

我正在尝试使用具有如下背景的简单 CSS 菜单进行试验:

body {
  background-color: #999999;
}

#MyMenu {
  width: 100%;
  background-color: #333333;
  text-align: center;
}

#MyMenuItem {
  margin 0;
  width: 200px;
  display: inline-block;
  padding: 15px;
  color: silver;
}

#MyMenuItem:hover {
  color: black;
  background-color: white;
}


/*  PROBLEMATIC CODE */

#MyMenuItem.active {
  margin: 0 auto;
  color: red;
  background-color: white;
}

<div id="MyMenu">
  <a href="#">
    <div id="MyMenuItem">1st Element</div>
  </a>
  <a href="#">
    <div id="MyMenuItem">2nd Element</div>
  </a>
  <a href="#">
    <div id="MyMenuItem" class="active">3rd Element</div>
  </a>

</div>

代码笔 Link

菜单似乎工作正常，但是当我尝试添加“事件”类时，第二个和第三个元素之间出现一个空格(边距？)(在您将鼠标悬停在第二个元素之后):

我尝试了不同的方法，但没有结果。我只有这段代码:

#MyMenuItem.active{
    margin: 0 auto; //doesn't work
    color: red;
    background-color: white;
}

请你看一下好吗？当然，我们将不胜感激每一个如何做得更好的建议。谢谢!

[http://http://codepen.io/kriszap/pen/NpjEmP

Answer 1

当你添加 display:flex;证明内容:居中； align-items:center; 元素水平和垂直居中，它会消除 div 之间的空格!

改变你的

#MyMenu { width: 100%; background-color: #333333; text-align: center; }

到

#MyMenu { width: 100%; background-color: #333333; text-align: center; display:flex; justify-content:center; align-items:center;}

它会得到你想要的结果!