根据文字动态改变按钮的大小？

Question

我是 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;

}

如何根据文本调整按钮大小？

谢谢。

Answer 1

使用

padding

而不是

width

来设置输入样式。这样您仍然可以设置控件的“厚度”，而不将其限制为固定宽度。

关于

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

http://jsfiddle.net/kBxz2/1/

Answer 2

试试这个

input{overflow: visible;padding: 2px 5px 2px 5px;}

Answer 3

这是在评论中，但不是现有的答案。上述问题（“如何根据文本调整按钮大小”）的答案将使用

auto

值作为

width

和/或

height

。

<button style='width:auto; height:auto;'>my<br>button</button>

Answer 4

你可以使用

min-width: yyypx;
widht: fit-content;