如何使Vue for循環生成的按鈕覆蓋div的整個區域？

Question

我正在嘗試生成帶有Vue for循環的按鈕，該按鈕將拉伸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;
}