Question

问题

我正在尝试使用Material Design Lite创建一个网站，我正在尝试在卡片顶部插入一个浮动操作按钮。但事情是......它正在削减！我不知道为什么，我对这个世界有点新意。

预期行为

我想要这样的东西。（摘自here）。

我得到了什么

这就是我的FAB现在的样子。

代码

这是 HTML 。

<div class="mdl-card mdl-shadow--2dp card card-historico">
                    <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent fab-top-right" id="refresh">
                        <i class="material-icons" role="presentation">refresh</i>
                        <span class="visuallyhidden">Refresh</span>
                    </button>
                    <div class="mdl-card__title card-title">
                        <h4 class="mdl-card__title-text">Histórico</h4>
                    </div>

                    <div class="container">
                        <!-- Table contents here -->
                    </div>
                </div>

CSS

.card {
   margin: 5% auto;
}

.card-title {
   background: #455A64; 
   color: #FEFEFE;
}

.card-historico {
   width: 45%;
   height: auto;
   z-index: 2;
}

.card-historico-table {
   margin-left:auto; 
    margin-right:auto;
    font-size: 14pt;
    color: rgba(0, 0, 0, 0.54);
}

.fab-top-right {
   position: absolute;
   top: 0px;
   right: 28px;
   transform: translate(0px, -28px);
   z-index: 900;
}

CSS的其余部分来自MDL，所以...我不确定我是否必须在此发布。

无论如何，任何人都可以帮我解决这个问题吗？

Answer 1

更改CSS的一点点：

.card-historico {
   width: 45%;
   height: auto;
   z-index: 2;
   overflow: visible;
}

这个overflow: visible会帮你解决问题。：）

剪切浮动操作按钮CSS

1 个答案: