MDL mdl-layout-spacer 强制内容到下一行答案

【问题标题】：MDL mdl-layout-spacer forcing content to next lineMDL mdl-layout-spacer 强制内容到下一行
【发布时间】：2017-02-16 09:58:54
【问题描述】：

这是一个非常基本的 Material Design Lite 问题，但这让我发疯了。在来自MDL examples website 的以下示例中，具有类mdl-layout-spacer 的div 很好地将其后面的元素定位到包含div 的右侧。请注意日历图标在右侧：

<!-- Event card -->
<style>
    .demo-card-event.mdl-card {
        width: 256px;
        height: 256px;
        background: #3E4EB8;
    }

    .demo-card-event>.mdl-card__actions {
        border-color: rgba(255, 255, 255, 0.2);
    }

    .demo-card-event>.mdl-card__title {
        align-items: flex-start;
    }

    .demo-card-event>.mdl-card__title>h4 {
        margin-top: 0;
    }

    .demo-card-event>.mdl-card__actions {
        display: flex;
        box-sizing: border-box;
        align-items: center;
    }

    .demo-card-event>.mdl-card__actions>.material-icons {
        padding-right: 10px;
    }

    .demo-card-event>.mdl-card__title,
    .demo-card-event>.mdl-card__actions,
    .demo-card-event>.mdl-card__actions>.mdl-button {
        color: #fff;
    }
</style>
<div class="demo-card-event mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title mdl-card--expand">
        <h4> Featured event:<br> May 24, 2016<br> 7-11pm </h4>
    </div>
    <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Add to Calendar
    </a>
        <div class="mdl-layout-spacer"></div> <i class="material-icons">event</i> </div>
</div>

现在解决问题。我已经在我的站点中的几种不同情况下尝试了mdl-layout-spacer 技术，但它似乎只适用于站点标题中的图标。在这张图片中查看右侧的徽章图标：

我希望能够在卡片中使用这种技术，但它似乎不起作用。我使用以下 html 创建了一个JSFiddle example。使用mdl-layout-spacer，我希望“today”一词位于包含 div 的右侧，但正如您所看到的，它会下降到下一行。

我错过了什么吗？我应该能够按预期使用垫片还是需要放弃这种野心？

<body>
    <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
        <main class="mdl-layout__content">
            <div class="mdl-grid">
                <div class="full-width-card hover-card mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-card mdl-shadow--2dp" style="min-height:100px;">
                    <div class="mdl-card__supporting_text">
                        <a class="no-decoration" href="#"> <span style="display:inline-block;">
                    username
                  </span> <span style="display:inline-block;">
                    <i class="material-icons">acct_icon</i>
                  </span> </a>
                        <!-- spacer -->
                        <div class="mdl-layout-spacer"></div>
                        <!-- --><span style="display:inline-block;">today</span> </div>
                </div>
            </div>
        </main>
    </div>
</body>

【问题讨论】：

标签： javascript html css material-design-lite

【解决方案1】：

不，那不是真的。 mdl-layout-spacer 类并非特定于图标。检查我创建的codepen example。我使用的是文本而不是图标，它工作正常。

在卡片示例中，您使用了样式：

.demo-card-event>.mdl-card__actions {
    display: flex;
    box-sizing: border-box;
    align-items: center;
}

这是将元素向右推的代码。查看这个JsFiddle 我使用相同的 css 来修复您的示例。

已编辑：您的示例不起作用，因为您的元素没有display: flex css。所以只需将此 css 添加到父类：

.mdl-card__supporting_text {
    display: flex;
}

【讨论】：