css3中的按钮宽度

Question

我有一个按钮，我希望它具有特定的大小

html

<a class="button icon Raise"
onclick="raiseButtonAction(realPlayer, gameState)" id="nupp1" href="#"><span>RAISE</span></a>

css

.button {
position: absolute;
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d),
    to(#65a9d7) );
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
-moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
color: white;
font-size: 19px;
font-weight: bold;
font-family: Segoe;
text-decoration: none;
vertical-align: middle;

但是如果我把例如宽度：100px;它的大小没有变化。 是我做错了什么还是您无法更改预制按钮的大小？

Answer 1

试试这个..

.button {
display:inline-block;
min-width: 50px;
width: 80px;
padding:5px 10px;

}

Answer 2

该样式位于 a 元素上，该元素是内联元素，不接受宽度。您可以将其更改为inline-block 或block，然后您就可以控制宽度了。

Answer 3

你需要把你的 变成一个块级元素。 Here's an example of it working.

我刚刚将此添加到您的 .button 的 CSS 中：

display: block;
width: 200px;
text-align: center;

Answer 4

失踪

显示：块；

如果你想在内联元素上设置固定宽度，必须将显示设置为阻塞