18-CSS问题-让多个div横排显示并设置间距解决方案

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

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

Vue.component("bili-con1", {    template: `<div :style="styles" class="biliCon">              <div v-for="list in lists" :style="listStyle">{{list.name}}</div></div>`,    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: "数码"}            ]

        }    }})

原文地址：https://www.cnblogs.com/Romantic-Blood/p/11124714.html