我正在尝试使用带有背景的简单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
答案 0 :(得分:2)
当您添加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;}
它会得到你想要的结果!
答案 1 :(得分:1)
DWT->CYCCNT
尝试一下,有时用东西填充混乱,
也在你的css页面顶部尝试添加
DWT->CYCCNT
答案 2 :(得分:1)
问题是代码中的空格和换行符。它或多或少是一个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。之前已经存在空间,您无法看到它,因为它与背景颜色相同。但是你可以看到它,如果你用鼠标悬停那个小区域,那么你的鼠标将变成像悬停文本的光标,而不是像悬停链接那样的手。
答案 3 :(得分:1)
由于active
类,该空间位于所有三个元素之间,而不仅仅是第2和第3个元素及其 NOT 。这是因为HTML
代码中的空格和换行。
首先,您需要知道代码中存在多个问题,如下所示:
1 - :
margin
margin 0;
CSS
#MyMenuItem
内的id
代码<{1}} 1}} p>
2 - 您对菜单中的每个div
使用相同的div
。 每个ID必须是唯一的。如果您想参考菜单中的每个div,请使用类而不是 id
3 - 请勿在{{1}}标记内使用a
。 (不推荐)
这是一个更简单,更好的代码版本,删除了所有三个元素之间的空格。
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;
答案 4 :(得分:1)
你有几个问题。首先,您看到的空间是<a>
标记之间的空格,即HTML代码中的实际空格。为了解决这个问题,您需要正确构建UI。
第二:不要在div
内使用a
,它应该是另一种方式。它还将解决您的布局问题。
第三,您对所有链接使用相同的id
。 id
必须是唯一的!在你的情况下,你应该使用类。