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

Question

我正在尝试使用css创建水平导航菜单，但是我在按钮大小相同时遇到问题，因为它们都调整为文本长度。我尝试了几个技巧：固定宽度，填充，文本对齐，使用em而不是px。如果我使用display：block作为垂直菜单，它们中的一些似乎有用，但是一旦我改为显示：内联它就不再起作用了。

这是导航栏的代码：

#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一些细节来强制它们总是相同的尺寸。