javascript - 如何让我的 Vue for 循环生成的按钮覆盖我的 div 的整个区域？

Question

我正在尝试使用 Vue for 循环生成按钮，该循环将拉伸(stretch) div 的整个宽度。

我的模板是这样的:

<div id="nonav" style="width: 100%; margin-right: 0px; margin-top: 100px">
                <button v-for="(val, key) in convertedCategories" :key="key"  @click="selectCategory(val, key)" v-if="Object.keys(selectedCategory).length===0  && searchText=='' && Object.keys(selectedSubcategory).length===0"
                    :style="{ width: $el.clientWidth/4 + 'px',
                        height: $el.clientHeight/4 + 'px',  
                        'padding-top': '30px',

                        display: 'inline-block'}"
                    class="tiles"           
                >
                <div v-if="val['icon']"><icon :name="val['icon']" scale="4" color="rgb(234, 34, 45)"></icon></div>
                <span><p style="font-size: 18px">{{ val['.key'].toUpperCase() }}</p></span>
                </button>
                <button v-for="(subval, subkey) in subcats(selectedCategory)" v-if="Object.keys(selectedCategory).length>0 && Object.keys(selectedSubcategory).length===0  && searchText=='' && subval['.key'] !== 'icon'" :key="subkey" @click="selectSubcategory(subval, subkey)"
                    :style="{ 
                        width: $el.clientWidth/4 + 'px',
                        height: $el.clientHeight/4 + 'px',

                        'padding-top': '30px',


                        display: 'inline-block'}"
                    class="tiles"       
                >
                <span v-if="subval['icon']"><icon :name="selectedCategory['icon']" scale="4" color="rgb(234, 34, 45)"></icon></span>
                <p style="font-size: 18px">{{ subkey.toUpperCase() }}</p>
                </button>
            </div>

如您所见，我试图通过父 div 的宽度除以 4 来定义宽度，因此每行将有 4 个按钮。问题是，虽然按钮看起来很灵敏，但它们并没有填满整个宽度——当我调整窗口大小时，留下了一些空白。如果按钮始终是窗口宽度的四分之一，怎么会出现这种情况？

(澄清一下:当我调整大小时，我可以关闭窗口，以便按钮按应有的方式填充 div，但如果再多，按钮将彼此堆叠并在左侧和左侧留下填充对)

Answer 1

首先移除按钮内联样式。其次，当您需要 CSS 帮助时始终提供 JSfiddle

#nonav {
    display: flex;
    align-items: stretch;
    justify-content: center
}
#nonav button.tules {
   flex: 1;
   width: auto;
}