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

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 和一些细节来强制它们的大小始终相同。