vue获取宽度不准确

Question

每个li元素都是动态创建的，宽度会根据每个li的文字多少决定，因为要横向滚动，所以要获取每个li的宽度来给ul赋值，我用的是better-scroll，现在获取宽度的时候比实际宽度少了3个像素，但是我把li里面的i标签拿掉以后就是正常，以下是我的代码。

<template>
    <div>
      <div class="nav" ref="wrapper">
        <ul class="content clearfix ">
          <router-link  v-for="(item,index) in getView" :to='{path:item.path}' :key="index" tag="li" >
              {{item.name}}<i v-if='index !== 0' class="el-icon-error" @click.prevent='_removeView(item.path,index)'></i>
          </router-link>
        </ul>
      </div>
    </div>
  </template>

<script>
export default {
return {
    getView:[
        {
            "name":"首页",
            "path":"/index"
        },
        {
            "name":"系统管理",
            "path":"/xtgl"
        }
    ]
  },
  methods:{
    setWidth:function(){
        this.$nextTick(() => {
            var content = this.$refs.content;
            var li = content.children;
            var width = 0;
            for( let i=0;i<li.length;i++)
            {
                width += li[i].clientWidth;
                console.log(li[i].clientWidth)
            }
            content.style.width = width +'px'; 
            
        });
    },
  }
}
</script>

Answer 1

谢邀！
本来打算直接运行一下你那个代码的，不过看起来似乎不行。
除了clientWidth获取可视区域宽度以外，还有几个获取宽度的属性，例如offsetWidth，可以都试一试。

还有一个问题就是你提到了去掉里面的i标签获取的宽度就正常了，那么有没有对所有标签的默认样式进行统一的处理，因为很多标签都是有默认样式的。