gpt4 book ai didi

html - 为样式为按钮的链接设置 % 宽度,无论其文本长度如何

转载 作者:太空宇宙 更新时间:2023-11-04 13:56:09 25 4
gpt4 key购买 nike

我认为标题说明了一切。我想将 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;


}

它工作正常,但我想设置按钮宽度,尽管它的文本长度,我想通过使用 % insted of px 来完成。有办法吗?

最佳答案

是的 - 有。

设置:

display:inline-block;

并移除

width: 82%;

http://jsfiddle.net/5jd5h/6/

新的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;
}

关于html - 为样式为按钮的链接设置 % 宽度,无论其文本长度如何,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21856838/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com