html - 显示内联创建不一致的宽度 IE 11

Question

我正在尝试创建一个菜单，其中所有链接都有与之关联的背景，并以内联格式显示。我希望这些元素的宽度都相同，但我很难弄清楚如何做到这一点，因为宽度似乎基于文本长度，填充似乎无助于解决这个问题随着文本长度的变化。任何帮助将不胜感激。 JSFiddle 示例:Here

例子:
HTML

<div id="menuLink"><a href="#" id="menu-link-home">Fuzz</a></div>
<div id="menuLink"><a href="#" id="menu-link-home">FuzzBuzz</a></div>

CSS:

#menuLink{
    background:#cccccc;
    display:inline;
    width:200px;
    height:50px;
}

Answer 1

内联 元素不受width 语句的影响。

只需将它们设为 inline-block。

.menuLink{
    background:#ff0000;
	display:inline-block;
	width:200px;
	height:50px;
}

<div class="menuLink"><a href="#" class="menu-link-home">Fuzz</a></div>
<div class="menuLink"><a href="#" class="menu-link-home">FuzzBuzz</a></div>

JSfiddle Demo

注意:您不能在同一页面上重复使用 ID，因此我将它们转换为类。