gpt4 book ai didi

html - 剪裁的 float 操作按钮 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 11:28:47 25 4
gpt4 key购买 nike

问题

我正在尝试使用 Material Design Lite 创建网站,我正在尝试在卡片顶部插入一个 float 操作按钮。但问题是……它被剪掉了!我不确定为什么,我对这个世界有点陌生。

预期行为

我想要这样的东西。 (取自 here )。

enter image description here

我得到了什么

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

enter image description here

代码

这是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,所以...我不确定是否必须将其发布在这里。

无论如何,有人可以帮我解决这个问题吗?

最佳答案

通过稍微更改您的 CSS,例如:

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

overflow: visible 将为您解决问题。 :)

关于html - 剪裁的 float 操作按钮 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32183861/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com