為什么按照這個代碼來布局
ul下的li跟.cartcontrol無法再一行顯示

 <div class="order-list" :selectFoods="selectFoods">
        <ul v-for = 'food in selectFoods' class="cartList">
          <li>{{food.name}}</li>
           <div class="cartcontrol">
            <transition name="fadeRotate">
              <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart()">
                <span class="icon-remove_circle_outline inner"></span>
              </div>
            </transition>
            <div class="cart-count" v-show="food.count>0">
              {{food.count}}
            </div>
            <div class="cart-add" @click.stop.prevent="addCart($event)">
              <i class="icon-add_circle"></i>
            </div>
          </div>
         
        </ul>

      </div>
      
      

.cartcontrol
.cart-decrease
{
  float: left;
  display:inline-block;
  padding:6px;
  transition: all .4s linear;
  background-color: red;
}
.cart-add{
  display:inline-block;
  vertical-align:top;
  font-size:24px;
  color:rgb(0,160,220);
  line-height:24px;
  padding:6px;
  background-color: red;
}
.cartList{
  float: left;
}