Html 根据文本动态改变按钮的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7848264/
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
Dynamically change the size of the button based on the text?
提问by KeenUser
I am new to HTML.
I am using the button style is css as given below
我是 HTML 的新手。我使用的按钮样式是 css，如下所示
.button_style_enabled {
background : url("images/button_down.png") ;
color : #FFFFFF;
height : 21px;
line-height : 21px;
text-align : center;
width : 112px;
border : 0px;
}
How do I adjust my button size based on the text?
如何根据文本调整按钮大小？
Thanks.
谢谢。
回答by Curt
Use paddinginstead of widthto set your input styles. This way you can still set the "thickness" of the control, without constraining it to a fixed width.
使用padding而不是width设置您的输入样式。这样您仍然可以设置控件的“厚度”，而无需将其限制为固定宽度。
Regarding a background-imagebeing cut off short, you can add a min-width to fix this:
关于background-image被剪短，你可以添加一个最小宽度来解决这个问题：
input {
color : #FFFFFF;
height : 21px;
line-height : 21px;
text-align : center;
width : auto;
border : 0px;
padding-left:10px;
padding-right:10px;
min-width:100px;
}
回答by huMpty duMpty
try this
尝试这个
input{overflow: visible;padding: 2px 5px 2px 5px;}
回答by nobar
This was in the comments, but not the existing answers. The answer to the stated question ("How do I adjust my button size based on the text") would be use the autovalue for widthand/or height.
这是在评论中，而不是现有答案。所述问题的答案（“如何根据文本调整按钮大小”）将使用和/或的auto值。widthheight
<button style='width:auto; height:auto;'>my<br>button</button>
