18-CSS problem - allows multiple div horizontal display and set the spacing Solutions

Before you set up multiple div horizontal display will use float: left, so the div out of the document flow, not easy to control, whether it is to set margin-left or position, left there will be no effect.

Then I tried to use display: inline-block, so you can use marginLeft to control the spacing between the multiple 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: "Animation"}, 
                {name: "Fan drama"}, 
                {name: "a State"}, 
                {name: "music"}, 
                {name: "Dance"}, 
                {name: "game"}, 
                {name: "science and technology"}, 
                {name: "digital"} 
            ] 


        } 
    } 
})