css列表在一行显示,【CSS】cssdiv跟ul无法同一行显示的问题

为什么按照这个代码来布局

ul下的li跟.cartcontrol无法再一行显示

• {{food.name}}

{{food.count}}

.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;

}

回答：

div.cartcontrol应该在ul的外面吧？

• xxx

yyy

.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;

padding: 0;

margin: 5px 10px;

}

回答：

ul的子节点只能是li，li和div都是块级元素，无法在一行里显示，你试着把div改成li，然后把li变成行内块或者浮动