27.如何实现div根据内容自定义长度

<div class="content">
  <div class="button" v-for="n in cateGoryList" :key="n">{{n}}</div>
</div>

  .content{
    display: block;
  }
    .button{
      // display:inline-block(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
      display:inline-block !important;
      height: 1rem;
      line-height: 1rem;
      margin: .2rem;
      padding-left: .5rem;
      padding-right: .5rem;
      background-color: white;
      color: black;
      text-align: center;
      vertical-align:middle;
      border-radius: .2rem;
      border-color:black;
      border-width: 1px;
      border-style: solid;
    }