水平菜单栏中大小相同的按钮

Question

我试图使用css创建一个水平导航菜单，但我在获得相同大小的按钮时遇到了问题，因为它们都可以根据文本长度进行调整。我试过几个技巧：固定宽度，填充，文本对齐，用em代替px。如果我对垂直菜单使用display:block，其中一些似乎可以工作，但一旦我改为display:inline，它就不再工作了。

这是我的导航栏代码：

#navigation li {
display: inline; 
padding: 20px;
text-decoration: none; 
font-size: 2em; 
background-image: url(../pics/skylt.png); 
background-size: 175px 60px; 
background-repeat: no-repeat; 
background-position: 0px 10px;
}

Answer 1

inline元素根据其内容的大小进行调整。

您可以尝试将inline-block与width（可以）或min-width（更好）组合使用，以使它们达到相同的大小。

或者，如果你想走一条稍微复杂一点的路线，你可以使用带有一些细节的display:table-cell来强制它们总是相等的大小。