css上下箭头加1减1

CSS中的上下箭头加1减1可以用于网页中的一些数字调节功能，比如数量选择等。下面是一个基础的示例：

 <div class="quantity">
        <span class="minus">-</span>
        <input type="text" class="number" value="1">
        <span class="plus">+</span>
    </div> 

上面的代码中，用到了一个div容器和三个子元素，分别是一个减号span元素、一个input输入框和一个加号span元素。下面是CSS样式的实现：

 .quantity {
        position: relative;
        display: inline-block;
    }
    
    .quantity .minus, .quantity .plus {
        position: absolute;
        display: block;
        width: 20px;
        height: 20px;
        text-align: center;
        font-size: 18px;
        cursor: pointer;
        top: 0;
    }
    
    .quantity .minus {
        left: 0;
    }
    
    .quantity .plus {
        right: 0;
    }
    
    .number {
        width: 50px;
        height: 20px;
        font-size: 16px;
        text-align: center;
    } 

上面的CSS代码中，我们给父级容器设置了相对定位，然后给子元素设置了绝对定位并居中。其中减号元素的left设置了0，加号元素的right设置了0，分别使得它们在左右两端。最后要注意的是输入框的样式，需要设置宽高和字体大小等。

有了这个基础的结构和样式，我们可以通过JavaScript来实现数字的自增和自减：

 var quantityEl = document.querySelector(".quantity");
    var minusEl = quantityEl.querySelector(".minus");
    var numberEl = quantityEl.querySelector(".number");
    var plusEl = quantityEl.querySelector(".plus");
    
    var num = 1;
    
    minusEl.addEventListener("click", function() {
        if(num > 1) {
            num--;
            numberEl.value = num;
        }
    });
    
    plusEl.addEventListener("click", function() {
        num++;
        numberEl.value = num;
    }); 

上面的JavaScript代码中，我们通过querySelector获取相关的元素，然后定义一个num变量用来保存当前的数字数量。在减号和加号元素上分别添加一个事件监听器，获取当前的数字，然后自增或者自减，并将数字更新到输入框中。

至此，我们就实现了一个基于CSS和JavaScript的上下箭头加1减1的功能。通过合理的布局和样式，我们可以让这个功能看起来更加美观和实用。