Html 为样式为按钮的链接设置%width，该链接的文本长度为%width

我认为标题说明了一切。我想样式css链接看起来像一个按钮。我这里有这个代码：

    .botsup {
  padding:5px;
background:#ffae00; /*fallback for browsers that don't support gradients*/
background: -webkit-linear-gradient(top, #ffae00, #d67600);
background: -moz-linear-gradient(top, #ffae00, #d67600);
background: -o-linear-gradient(top, #ffae00, #d67600);
background: linear-gradient(top, #ffae00, #d67600);
border:4px outset #dad9d8;

  border: 3px solid #999;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 20px;
/*give the button a drop shadow*/
-webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
  text-decoration:none;

display: block;
width: 82%;
line-height: 190%;
font-family: "Arial";
text-align: center;
vertical-align: middle;
font-weight: bolder;
font-size: 98.5%;
color: gray;


}

它工作得很好，但是我想设置按钮宽度，不管它的文本长度如何，我想用%代替px。有办法吗？

是的，有办法

设置：

移除

width: 82%;

新css：

.botsup {
padding:5px;
display: inline-block;
line-height: 190%;
font-family: "Arial";
text-align: center;
vertical-align: middle;
font-weight: 700;
font-size: 98.5%;
color: gray;
background: #ffae00;
background: -webkit-linear-gradient(top, #ffae00, #d67600);
background: -moz-linear-gradient(top, #ffae00, #d67600);
background: -o-linear-gradient(top, #ffae00, #d67600);
background: linear-gradient(top, #ffae00, #d67600);
border:4px outset #dad9d8;
border: 3px solid #999;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
text-decoration:none;
}

---

我想这就行了；）是的，我想给出和你一样的答案：P，所以我认为你读对了。@user3261537为什么要设置宽度？您可以设置“最大宽度”或“最小宽度”-使用固定宽度时，您的行为将与以前相同。@user3261537但您在问题的第一个示例中已经这样做了？？在问题示例中，宽度取决于文本长度

.botsup {
padding:5px;
display: inline-block;
line-height: 190%;
font-family: "Arial";
text-align: center;
vertical-align: middle;
font-weight: 700;
font-size: 98.5%;
color: gray;
background: #ffae00;
background: -webkit-linear-gradient(top, #ffae00, #d67600);
background: -moz-linear-gradient(top, #ffae00, #d67600);
background: -o-linear-gradient(top, #ffae00, #d67600);
background: linear-gradient(top, #ffae00, #d67600);
border:4px outset #dad9d8;
border: 3px solid #999;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
text-decoration:none;
}