如何使按钮标签展开？答案

【问题标题】：How can I make a button tag to expand?如何使按钮标签展开？
【发布时间】：2013-08-05 11:49:26
【问题描述】：

我在设计这段 html 代码时遇到了麻烦：

<div class="item-buttons">
    <a href="/some/url/with/value/1417">Sample button link</a>
    <button class="some-class some-status" value="1417">Button</button>
    <a href="/some/url/with/value/385">Other link</a>
</div>

根据下面的 CSS 规则，此代码将显示为带有按钮的框。用<a> 标记表示的按钮将只是作为普通链接，而<button> 按钮具有更复杂的行为，需要在其类属性和value 属性中存储一些状态信息。这就是为什么我不为他们使用<a> 标签。

这是应用于它们的 CSS：

.item-buttons {
position: absolute;
top: 5px;
right: 0px;
width: 130px;
}

.item-buttons a, .item-buttons button {
background: #eee;
color: #333;
text-decoration: none;
text-align: center;
display: block;
padding: 6px 8px;
margin-bottom: 5px;
border: 1px solid #ccc;
font-size: 12px;

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));
background: -moz-linear-gradient(top, #fff, #f5f5f5);
background: -o-linear-gradient(top, #fff, #f5f5f5);
background-color: #f5f5f5;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#.item-buttons a:hover, .item-buttons button:hover {
background: #a2e249;
color: #3d640e;
}

这里是the whole example in JSFiddle。如您所见，<a> 和 <button> 按钮看起来非常相似，只是 <button> 按钮不像 <a> 按钮那样扩展。我希望他们都扩大。我尝试了几个 CSS 规则无济于事。你能帮我解决这个问题并让<button> 按钮展开吗？

【问题讨论】：

标签： html css button stylesheet styling

【解决方案1】：

.item-buttons a, .item-buttons button{width:100%; box-sizing:border-box;}

【讨论】：

【解决方案2】：

如果您将按钮类设置为此指令，它似乎可以工作。这是你所期望的吗？

.some-class {
width: 100%;

}

【讨论】：

虽然这适用于 JSFiddle，但不适用于我的项目。该按钮扩展了一点，但没有达到应有的程度。 Anon 的回答确实有效。无论如何，谢谢。