我试图创建一个菜单，其中所有的链接有一个背景与它相关联，并以内联格式显示。我希望这些元素的宽度都是相同的，但我有一个很难的时间试图弄清楚如何做到这一点，因为宽度似乎是基于文本长度，填充似乎没有帮助这个问题的文本长度变化。任何帮助都将非常感激。这里示例JSFiddle:
例子:
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>
#menuLink{
background:#cccccc;
display:inline;
width:200px;
height:50px;
}
inline元素不受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演示/strong>
注意:你不能在同一个页面上重复使用id，所以我把它们转换成一个类。
您可以通过将html结构更改为使用ul - li进行导航的最常用实践来实现相同的目的。
<ul>
<li><a href="#" id="menu-link-home">Fuzz</a></li>
<li><a href="#" id="menu-link-home">FuzzBuzz</a></li>
</ul>
相同的样式仍然有效:
ul li{
display:inline-block;
width: 200px;
background-color:red;
height:50px;}