约束按钮大小

时间:2012-12-24 08:18:37

标签: button size constraints

我需要限制此按钮,以便黄色边框完全适合加号,就像“Go”一样。 enter image description here

这是按钮的CSS,用于辅助:

 #addinput{
        border-radius: 10px;
        font-family: 'Belgrano', serif;
        color: #FFE200;
        text-shadow: 0px -1px 1.9px #fff, 0px 3px 2px #000;
        background:transparent;
        font-size: 3em;
        height:50%;
        background-size: 40% auto;
        display:block;
        border:1px solid yellow;
    }

pic 2

enter image description here

3 个答案:

答案 0 :(得分:1)

以px为单位设置高度值,行高可能稍微小一点,也以px为单位。请参阅jsfiddle

#addinput{
    border-radius: 10px;
    font-family: 'Belgrano', serif;
    color: #FFE200;
    text-shadow: 0px -1px 1.9px #fff, 0px 3px 2px #000;
    font-size: 3em;
    display: block;
    border: 1px solid yellow;
    height: 40px;
    line-height: 30px;
}

答案 1 :(得分:0)

height:50%导致它伸展,如果你删除了边框将完全适合它一直围绕它。

答案 2 :(得分:0)

您可以尝试在容器内的段落中包装+:

​<div id="addinput"><p>+</p></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

然后CSS将是:

#addinput p {
  margin-bottom: -10px; 
  margin-top: -10px;     
}