html 三个div横向显示出来,18-CSS问题-让多个div横排显示并设置间距解决方案

之前设置多个div横排显示都会使用float:left，这样使div脱离了文档流，不容易控制，不管是设置margin-left还是position，left都不会有效果。

后来我尝试了使用display:inline-block,这样就可以使用marginLeft来控制多个div之间的间距了。

Vue.component("bili-con1", {

template: `

{{list.name}}

`,

data() {

return {

styles: {

background: "deepskyblue",

width: "1200px",

height: "50px",

position: "absolute",

left: "50%",

marginLeft: "-600px",

},

listStyle:{

display:"inline-block",

marginLeft:"50px",

},

lists: [

{name: "首页"},

{name: "动画"},

{name: "番剧"},

{name: "国创"},

{name: "音乐"},

{name: "舞蹈"},

{name: "游戏"},

{name: "科技"},

{name: "数码"}

]

}

}

})