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: "數碼"}
            ]


        }
    }
})