效果图

image.png

截取部分代码

html

<table>
     <tr>
          <td>数量</td>
          <td class="gmcp_cp_tr04_std01">
                <ul class="btn-numbox">
                       <li>
                         <ul class="count">
                                 <li><span id="num-jian" class="num-jian">-</span></li>
                                 <li><input type="text" class="input-num" id="input-num" value="0" /></li>
                                 <li><span id="num-jia" class="num-jia">+</span></li>
                         </ul>
                        </li>
                        <li><span class="kucun">（库存:100）</span></li>
                </ul>
<script type="text/javascript">
        var num_jia = document.getElementById("num-jia");
        var num_jian = document.getElementById("num-jian");
        var input_num = document.getElementById("input-num");

        num_jia.onclick = function() {

            input_num.value = parseInt(input_num.value) + 1;
        }

        num_jian.onclick = function() {

            if(input_num.value <= 0) {
                input_num.value = 0;
            } else {

                input_num.value = parseInt(input_num.value) - 1;
            }

        }
</script>
          </td>
     </tr>
</table>

css样式

.gmcp_cp_tr04_std01 {
padding-top:5%;
    }

.btn-numbox {
    overflow: hidden;
            }
        
.btn-numbox  li {
    float: left;
    }
    
.kucun {
                display: inline-block;
                font-size: 12px;
                color: #808080;
                vertical-align: sub;
            }
           
.btn-numbox .count {
       overflow: hidden;
margin: 0 16px 0 -20px;
            }
          
.btn-numbox .count .num-jian,
.input-num,
.num-jia {
                display: inline-block;
                text-align: center;
                color:#333;
                cursor: pointer;
                border: 1px solid #e6e6e6;
                 width: 28px;
                height: 28px;
                line-height: 28px;
                font-size: 18px;
            }
    
.btn-numbox .count .input-num {
                width: 58px;
                color: #333;
                border-left: 0;
                border-right: 0;
            }