如何让按钮标签展开？

Question

我有麻烦造型这一块的HTML代码：下面给出的CSS规则

<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> 

这段代码，将得到显示为带有按钮的对话框。用<a>标记表示的按钮只是表现为普通链接，而<button>按钮具有更复杂的行为，需要将某些状态信息存储在其class属性和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>按钮扩大？

Answer 1

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

Answer 2

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

.some-class { 
width: 100%; 

}