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>

Codepen Link

菜单似乎运行得很好，但是当我尝试添加“活动”类时，在第2个和第3个元素之间出现空格（边距？）（在2日悬停之后）：

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

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

你能看一下吗？当然，每个建议如何做得更好将不胜感激。谢谢！

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

Answer 1

当您添加display:flex; justify-content:center; 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;}

它会得到你想要的结果！

Answer 2

DWT->CYCCNT

尝试一下，有时用东西填充混乱，

也在你的css页面顶部尝试添加

DWT->CYCCNT

Answer 3

问题是代码中的空格和换行符。它或多或少是一个css bug。如果您仍然想要一个可读的代码，请尝试将所有空格放在这样的注释中：

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

我在codepen中测试了它，它的工作原理。对于不同的解决方案，请参阅https://css-tricks.com/fighting-the-space-between-inline-block-elements/，但我喜欢“技巧”，评论最佳且最兼容。

/修改

问题不在于您的活动类，而是html。之前已经存在空间，您无法看到它，因为它与背景颜色相同。但是你可以看到它，如果你用鼠标悬停那个小区域，那么你的鼠标将变成像悬停文本的光标，而不是像悬停链接那样的手。

Answer 4

由于active类，该空间位于所有三个元素之间，而不仅仅是第2和第3个元素及其 NOT 。这是因为HTML代码中的空格和换行。

首先，您需要知道代码中存在多个问题，如下所示：

1 - : margin margin 0; CSS #MyMenuItem内的id代码<{1}}

2 - 您对菜单中的每个div使用相同的div。 每个ID必须是唯一的。如果您想参考菜单中的每个div，请使用类而不是 id

3 - 请勿在{{1}}标记内使用a。（不推荐）

这是一个更简单，更好的代码版本，删除了所有三个元素之间的空格。

＆＃13;

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;
}

.active{
color: red;
background-color: white;
}

＆＃13;

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

＆＃13;

Answer 5

你有几个问题。首先，您看到的空间是<a>标记之间的空格，即HTML代码中的实际空格。为了解决这个问题，您需要正确构建UI。

第二：不要在div内使用a，它应该是另一种方式。它还将解决您的布局问题。

第三，您对所有链接使用相同的id。 id必须是唯一的！在你的情况下，你应该使用类。

Example with a better layout

CSS：活跃的课程

5 个答案:

/修改