Question

大家好，我在css方面遇到麻烦，我不太确定问题究竟来自哪里。

我有三个动态生成的模板：

<div v-html="modelFirst(key, info)" v-for="(info, key) in infos.info"
               :key="key.id"
               class="info"
               style="display:flex;margin-right:5px;line-height:20px;"> 
 </div>

包含以下内容的v-html：

modelFirst(key, info){
        const label = key > 2 ? `<label style="font-weight:bold;display:inline-block;">${info.label} </label>`: ``;
        const color = key == 2 ? `color: #CCCBD0` : ``;
        const bold = key <= 2 ? `font-weight: bold` : ``;
        const space = key <=2 ? `margin-bottom: 10px`: ``;
        return this.model = `<div display:flex;>${label}

                                <div style="
                                            ${space};
                                            ${color};
                                            ${bold};">${info.text}</div>
                              </div>`;

      },

我出于特定原因使用了litteral模板。它给了我这个结果：

fanto
fanto
myJob
Adresse: 00 street of nowhere 00000
Tel:  01 00 00 00 00
Mobile:  06 00 00 00 00
Email:  fanto@fanto.com
Site:  www.google.fr

所以标签和div按照我的要求对齐，但对于没有标签的3个数据，不可能让它们对齐！我已经尝试了所有的显示，flex等但没有做任何事情，我提出了一个理论，它可能是由循环引起的，那么我怎么能强制对齐呢？

Vuejs如何在html循环中强制css内联显示

0 个答案: