在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ li元素里的內(nèi)容實(shí)現(xiàn)靠?jī)蛇厡?duì)齊

li元素里的內(nèi)容實(shí)現(xiàn)靠?jī)蛇厡?duì)齊

<li v-for = 'food in selectFoods' class="cartList"   :key="food.name">{{food.name}}
              <span @click = "addFood(food)" class="addFood">+</span>
              <b>{{food.count}}</b>
              <span @click = 'decreaseFood(food)' class="decreaseFood">-</span>
              <span>價(jià)格：￥{{food.count * food.price}}</span>
            </li>
.cartList{
  font-size: 12px;
  margin-top:2px;
  padding: 12px;
  margin: 5px;
  color:white;
  border-radius:5px;
  background-color: #00B595;
  -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .5);  
  -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
  box-shadow:0 0 10px rgba(0, 0, 0, .5);  

}

讓food.name在 左側(cè) 剩下的在右側(cè)

回答
編輯回答
憶當(dāng)年

自己用樣式寫(xiě)啊，很多都可以實(shí)現(xiàn)，讓food-title float:left,其余food-info float:right
或者用flex
最好是name包裹一層，其余內(nèi)容包裹一層
例：

<li v-for = 'food in selectFoods' class="cartList"   :key="food.name">
    <span class="food-title">{{food.name}}</span>
    <div class="food-info">
        <span @click = "addFood(food)" class="addFood">+</span>
        <b>{{food.count}}</b>
        <span @click = 'decreaseFood(food)' class="decreaseFood">-</span>
        <span>價(jià)格：￥{{food.count * food.price}}</span>
    </div>
</li>
2017年5月21日 20:48
編輯回答
假灑脫

這么寫(xiě)應(yīng)該就行了：

.cartList {
    ... //你上面那些代碼沒(méi)變
    text-align: left; //默認(rèn)也是這樣，可以不寫(xiě)
}
.cartList span, .cartList b {
    text-align: right;
}

還有一些屬性是沒(méi)添加的，只是舉個(gè)例子，看你具體是怎么用的，用float或者用我這個(gè)，但是例如span默認(rèn)是行內(nèi)元素，寬度是根據(jù)內(nèi)容定的，想實(shí)現(xiàn)的話要先變成塊級(jí)元素，之后才有效果

2017年7月25日 18:43