CSS tile size tweak

Question

我试图使我的瓷砖看起来相同，甚至文本里面增加。但它似乎能够工作，甚至与word属性。我想做＆＃34;购买延长保修＆＃34;和＆＃34;＆＃34;列出服务包的机器＆＃34;与其他人一样。 有人可以帮忙吗？

.tile {

width: 100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 30px;
margin-bottom: 40px;
text-align:center;

}

.tile:hover
{
background:#F8F9F9;
}



    <div class="tab-pane active" id="warranty">
                                    <div class="col-md-4">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a>

                                    </div>
                                    <div class="col-md-4">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a>

                                    </div>
                                    <div class="col-md-4">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a>

                                    </div>
                                    <div class="col-md-4 ">
                                        <a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a>

                                    </div>
                                </div>

Answer 1

您可以使用flex-box：

的CSS：

.tab-pane {
    display: flex;
    flex-wrap: wrap;
}

.tile {
    width: 100%;
    padding: 30px;
    margin-bottom: 40px;
    text-align: center;
    display: block;
}

.tile:hover {
    background: #F8F9F9 !important;
}

HTML

<div class="tab-pane active" id="warranty">
    <div class="col-sm-4">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a>

    </div>
    <div class="col-sm-4">
        <a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a>

    </div>
    <div class="col-sm-4">
        <a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a>

    </div>
    <div class="col-sm-4 ">
        <a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a>

    </div>
</div>

我将col-md-4上的课程调整为col-sm-4，以便您可以看到它的实际效果。我包含了bootstrap CDN CSS，因为你在HTML中使用了bootstrap类名。我添加了!important来覆盖锚标签上的内联颜色样式。

这是在行动中看到它的小提琴： https://jsfiddle.net/mjqfjbh0/1/