按钮宽度不同 HTML & CSS

Question

我网站上的按钮有问题，它们的宽度不一样，我尝试设置宽度但没有结果。

CSS

.menuList{
    text-align: center;
    margin-top: 2em;
}
.lItem{
    display: inline-block;
    margin-left: 1em;
    margin-right: 1em;
    max-height: 1em;
}
.btn{
    text-decoration: none;
    color: white;
    margin: 0 auto;
    padding: 1em 4em 1em 4em;
    font-family: 'Raleway';
    border: 2px solid white;
}

HTML

<ul class="menuList">
    <li class="lItem"><a class="btn" href="#">Cooking</a></li>
    <li class="lItem"><a class="btn" href="#">Technique</a></li>
</ul>

Answer 1

CSS 变化：

.menuList{
    text-align: center;
    margin-top: 2em;
}
.lItem{
    display: inline-block;
    margin-left: 1em;
    margin-right: 1em;
    line-height: 2.4em;
    max-width:184px;
    width:184px;
    border: 2px solid white;
}
.btn{
    text-decoration: none;
    color: white;
    margin: 0 auto;
    padding: 1em auto;
    font-family: 'Raleway';
}

按钮宽度不同 HTML & CSS

Button not same width HTML & CSS

html

css

button

width