基于行内元素之间不对齐全的方式解决办法（购物车按钮加减数量案例）

.btn{
  display:inline-block;
  vertical-align:middle;
  line-height:30px;
  border:solid 1px #ddd;
  font-size:14px;
  text-align:center;
  padding:0 16px;
 /*下面鼠标样式 必加 */
  cursor:pointer;
  /* 用户鼠标多次点击不会选中文字*/
  user-select:none;
}
.value{
   display:inline-block;
   vertical-align:middle;
   width:200px;
   line-height:31px;
   border-bottom:solid 1px solid #ddd;
   font-size:16px ;
   text-align:center;
   color:#1e1e1e;
   font-weight:600;
}
//样式可能这里因为处理不了元素之间的对齐，就需要单独处理元素对齐全，也就是dom元素

 1.在按钮的处理就是将行内元素结束标签和后面开始的标签跟着，就不会间隙空格

 

 

 

2.dom这样对按钮数量写法

<!-- <div style="font-size:0;"> 这是一种方式 但推荐下面的标签连接方式也可以-->
<div>
    <h2>购物车</h2>
<hr>
<span onclick="btnEvt('patch',12)" class="btn">按打增加</span><span 

onclick="btnEvt('add',6)" class="btn">增加</span><span 

id="valueNode" class="value">1</span><span onclick="btnEvt('minus',2) class="btn">
减少</span>
</div>
<!-- 这样对行内标签进行连接就可以没有出现间隙的问题 -->

3..这是将标签前后对齐就出现好看的按钮效果了

js对数量操作

var obj={
   count:10
}
function render(){
   valueNode.innerText= obj.count
}
//首页加载的时候，需要去执行一次render()
render()
function btnEvt(type,step){
   switch(type){
   case 'add':
      obj.count += step
      break
    case  'patch':
      obj.count  += step
     break
     obj.count -= step
    break
}
render()
//if (type === 'add'){
//  obj.count += step
//}else if (type === 'patch'){
// obj.count += step 
//} else{
// obj.count -= step  } 
}