根据文本动态更改按钮的大小?

时间:2011-10-21 10:39:42

标签: html css button

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

}

如何根据文字调整按钮大小?

感谢。

3 个答案:

答案 0 :(得分:5)

使用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/

答案 1 :(得分:0)

试试这个

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

答案 2 :(得分:0)

这是在评论中,而不是现有的答案。所述问题(“如何根据文字调整按钮大小”)的答案将使用auto和/或width的{​​{1}}值。

height