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

Posted 2022-03-11 romantic-blood

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


        
    
)