Question

我尝试使用Vue for-loop生成按钮，该按钮将拉伸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

session_start();
        require_once("connection.php");
        if(isset($_POST['submit2']))
        {
            $n = $_POST['name2'];
            $id=2;
            $query1= "SELECT ItemName,Price FROM items WHERE ItemID = '2' ";
            $result1=mysqli_query($con,$query1);
            while($row=mysqli_fetch_array($result1))
            {
                $iname=$row["ItemName"];
                $p=$row["Price"];

                $query = "INSERT INTO shopcart VALUES ('$id','$iname','$p','$n') ";
                $result = mysqli_query($con,$query);
                if($result)
                {
                    echo "success";
                }
            }
        }

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

1 个答案: