css - 如何使我的 Button Div 都具有相同的宽度？

Question

我正试图找到我遇到的问题的答案。我有很多按钮，我希望它们出现在页面下方并且宽度都相同。我有以下代码和 CSS。但是它们似乎不是全宽。理想情况下，我想要的是它们的宽度等于封闭的 DIV。我还希望文本像现在一样居中显示。谁能告诉我为什么所有按钮的宽度都不一样？

我有以下代码:

<div style="width: 200px;">
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test</a>
  </div>
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test  sadfadsfdsafsadfsa</a>
  </div>
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test  afds</a>
  </div>
  <div class = "abc" >
    <a class = "btn"  href="/test" title="Classes">Test asdfdsafadsfdsfasdfsadfdsf</a>
  </div>
</div>

和以下 CSS:

.abc {
    float: left;
    height: 25px;
    padding-top: 4px;
    text-align: center;
    width: 190px;
}

a.btn {
    border: 1px solid;
    border-radius: 3px 3px 3px 3px;
    cursor: default;
    font-size: 12px;
    padding: 3px 4px;
    text-decoration: none;
    width: 180px;
}

我创建了一个 fiddle

fiddle

Answer 1

如果要指定 a 标签的宽度，您需要将其设置为 display: block