Html css3中的按钮宽度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5462251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 07:39:05  来源:igfitidea点击:

Button width in css3

htmlbuttoncsswidth

提问by nils

I have a button and I want it to be a particular size

我有一个按钮,我希望它是特定大小的

html

html

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

css

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;

But if I put for example width:100px; it doesn't change in size. Am I doing something wrong or you just can't change the size of a premade button?

但是如果我把例如 width:100px; 它不会改变大小。是我做错了什么,还是您无法更改预制按钮的大小?

回答by Robin Maben

Try this..

尝试这个..

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

}

回答by Liza Daly

That style is on an aelement, which is an inline and won't accept a width. You could change it to be inline-blockor blockand then you'll have control over the width.

该样式位于一个a元素上,该元素是内联元素并且不接受宽度。您可以将其更改为inline-blockblock,然后您就可以控制宽度。

回答by Conspicuous Compiler

You need to make your <a> into a block level element. Here's an example of it working.

您需要将 <a> 变成块级元素。 这是它工作的一个例子

I just added this to your CSS for .button:

我刚刚将它添加到您的 .button 的 CSS 中:

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

回答by Mark

Missing

丢失的

display: block;

显示:块;

Have to set display to block if you want to set a fixed width on an inline element

如果要在内联元素上设置固定宽度,则必须将显示设置为阻止