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

标签：float   css   splay   lin   temp   ack   sts   方案   动画   

之前设置多个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: "数码"}
            ]


        }
    }
})

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

标签：float   css   splay   lin   temp   ack   sts   方案   动画   

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