Question

帮助！当我向按钮添加填充时，文本被截断。有人可以解决这个问题吗？我不知道你是否需要添加一个css属性。这是我的代码：

<!DOCTYPE html>
        <html>
            <head>
            <title>Simple Calculator</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
        input[type="button"]{
            background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #606060), color-stop(1, #606060) );
            background:-moz-linear-gradient( center top, #606060 5%, #606060 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#606060', endColorstr='#606060');
            background-color:#606060;
            -webkit-border-top-left-radius:0px;
            -moz-border-radius-topleft:0px;
            border-top-left-radius:0px;
            -webkit-border-top-right-radius:0px;
            -moz-border-radius-topright:0px;
            border-top-right-radius:0px;
            -webkit-border-bottom-right-radius:0px;
            -moz-border-radius-bottomright:0px;
            border-bottom-right-radius:0px;
            -webkit-border-bottom-left-radius:0px;
            -moz-border-radius-bottomleft:0px;
            border-bottom-left-radius:0px;
            text-indent:0;
            border:1px solid #606060;
            display:inline-block;
            color:#ffffff;
            font-family:Arial;
            font-size:33px;
            font-weight:normal;
            font-style:normal;
            height:65px;
            line-height:65px;
            width:131px;
            text-decoration:none;
            text-align:center;
            padding-top:25px;
            padding-bottom:25px;
            padding-right:50px;
            padding-left:50px;
        }
               input[type="button"]:active {
            position:relative;
                    background:#989898;
                   padding-top:25px;
                   padding-bottom:25px;
                   padding-right:50px;
                   padding-left:50px;
        }
                input:focus {
                    outline:0;
                }

            </style>
        </head>
        <body>
            <FORM name="Keypad" action="">
        <input name="ReadOut" type="Text" size=24 value="0" width=100% readonly>
        <input id="btnC" type="Button" value="  C  " onclick="Clear()">
        <input id="btnCE" type="Button" value="  CE " onclick="ClearEntry()">
        <input id="btn7" type="Button" value="  7  " onclick="NumPressed(7)">
        <input id="btn8" type="Button" value="  8  " onclick="NumPressed(8)">
        <input id="btn9" type="Button" value="  9  " onclick="NumPressed(9)">
        <input id="btnplusminus" type="Button" value=" +/- " onclick="Neg()">
        <input id="btnpercent" type="Button" value="  % " onclick="Percent()">
        <input id="btn4" type="Button" value="  4" onclick="NumPressed(4)">
        <input id="btn5" type="Button" value="  5   "onclick="NumPressed(5)">
        <input id="btn6" type="Button" value="  6  " onclick="NumPressed(6)">
        <input id="btnplus" type="Button" value="  +  " onclick="Operation('+')">
        <input id="btnminus" type="Button" value="   -   " onclick="Operation('-')">
        <input id="btn1" type="Button" value="  1  " onclick="NumPressed(1)">
        <input id="btn2" type="Button" value="  2  " onclick="NumPressed(2)">
        <input id="btn3" type="Button" value="  3  " onclick="NumPressed(3)">
        <input id="btnmultiply" type="Button" value="  *  " onclick="Operation('*')">
        <input id="btndivide" type="Button" value="   /   " onclick="Operation('/')">
        <input id="btn0" type="Button" value="  0  " onclick="NumPressed(0)">
        <input id="btndecimal" type="Button" value="   .  " onclick="Decimal()">
        <input id="btnequals" type="Button" value="  =  " onclick="Operation('=')">
        </FORM>
        <script>
        var FKeyPad = document.Keypad;
        var Accumulate = 0;
        var FlagNewNum = false;
        var PendingOp = "";
        function NumPressed (Num) {
        if (FlagNewNum) {
        FKeyPad.ReadOut.value  = Num;
        FlagNewNum = false;
           }
        else {
        if (FKeyPad.ReadOut.value == "0")
        FKeyPad.ReadOut.value = Num;
        else
        FKeyPad.ReadOut.value += Num;
           }
        }
        function Operation (Op) {
        var Readout = FKeyPad.ReadOut.value;
        if (FlagNewNum && PendingOp != "=");
        else
        {
        FlagNewNum = true;
        if ( '+' == PendingOp )
        Accumulate += parseFloat(Readout);
        else if ( '-' == PendingOp )
        Accumulate -= parseFloat(Readout);
        else if ( '/' == PendingOp )
        Accumulate /= parseFloat(Readout);
        else if ( '*' == PendingOp )
        Accumulate *= parseFloat(Readout);
        else
        Accumulate = parseFloat(Readout);
        FKeyPad.ReadOut.value = Accumulate;
        PendingOp = Op;
           }
        }
        function Decimal () {
        var curReadOut = FKeyPad.ReadOut.value;
        if (FlagNewNum) {
        curReadOut = "0.";
        FlagNewNum = false;
           }
        else
        {
        if (curReadOut.indexOf(".") == -1)
        curReadOut += ".";
           }
        FKeyPad.ReadOut.value = curReadOut;
        }
        function ClearEntry () {
        FKeyPad.ReadOut.value = "0";
        FlagNewNum = true;
        }
        function Clear () {
        Accumulate = 0;
        PendingOp = "";
        ClearEntry();
        }
        function Neg () {
        FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
        }
        function Percent () {
        FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accumulate);
        }
        </script>
        </body>
        </html>

它说我的帖子主要是代码所以生病了随机的东西here.sdfhkjfksf

Answer 1

您要在CSS中设置按钮的绝对宽度，移除width:131px;，您应该好好去。您也可以删除高度。

此外，您可以将CSS简化为以下内容：

input[type="button"]{
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #606060), color-stop(1, #606060) );
    background:-moz-linear-gradient( center top, #606060 5%, #606060 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#606060', endColorstr='#606060');
    background-color:#606060;
    border:1px solid #606060;
    display:inline-block;
    color:#fff;
    font-family:Arial;
    font-size:33px;
    line-height:65px;
    text-decoration:none;
    text-align:center;
    padding:25px 50px;
}
input[type="button"]:active{
    background:#989898;
}
input:focus{
    outline:0;
}

我删除了很多冗余和/或不必要的东西。

使用填充时，文本会切断按钮。请帮助我

1 个答案: