Question

我正在使用物质css进行小型项目，特别是卡片。我的页面中有2 cards，想要删除它们之间的空格。我认为我会相当琐碎，但似乎无法将任何css应用于我的内容。继承我的代码：

<div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="card-panel blue accent-3">
                    <div class="card-content">
                        <span class="card-title white-text"><i class="fa fa-bars" aria-hidden="true">
                            </i> title</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" id="second">
            <div class="col-md-6 col-md-offset-3">
                <div class="card-panel white blue-text">
                    <div class="card-content">
                        <ul>
                            <li><a href="#">report 1</a></li>
                            <li><a href="#">report 2</a></li>
                            <li><a href="#">report 3</a></li>
                            <li><a href="#">report 4</a></li>
                            <li><a href="#">report 5</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS：

<style type="text/css">
    body {
        background-color: #e7e6ef;
    }
    .row {
        width: 500px;
        margin-left: 50%;
    }
    #second {
        margin-top: 0; !important;
    }
</style>

外观如何：

然而，我似乎无法消除2张牌之间的差距，也不能将它们居中。非常感谢任何帮助

Answer 1

你必须为.row和.card-panel设置保证金：

.row{
    margin-bottom: 0px !important;
}

.card-panel {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

这是一个有效的https://msdn.microsoft.com/en-us/library/office/jj684209(v=office.15).aspx

Answer 2

您可以添加.card-panel { margin: 0; }（此类具有您需要覆盖的预设边距）

Answer 3

将css添加到row div Working Fiddle

.row{ 
  width:500px;
  margin:0 auto !important;
}

此外，您正在将bootstrap类与materialize.css类混合，请尝试仅使用一个插件。

Answer 4

我注意到了一件事 margin-top：0; ！重要; 是错的。用。。。来代替 margin-top：0！important;

消除2个div之间的差距

4 个答案: