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

Answer 1

如果您想指定a代码的宽度，则需要将其设置为display: block

Answer 2

删除class =“abc”div，不需要它们给.btn类display: inline-block;（或只是block，但我不喜欢它。）

Answer 3

链接（a）元素本质上是内联元素，忽略宽度声明。

通过将display:block应用于a.btn，它将接受您的宽度声明。

Answer 4

您只能为块级元素指定宽度。要更正它，您可以在a.btn类中添加display:block;或display:inline-block;

Answer 5

将display:block;添加到a.btn。

Answer 6

你需要设置a.btn display：block; 因为，默认情况下，a是内联元素。

如何使我的Button Divs具有相同的宽度？

6 个答案: