个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
这是一个非常基本的 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 技术，但它似乎只适用于站点标题中的图标。在此图片中查看右侧的徽章图标:
我希望能够在卡片中使用这种技术，但它似乎不起作用。我创建了一个 JSFiddle example使用以下 html。使用 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>
最佳答案
不，那不是真的。 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;
}
关于javascript - MDL mdl-layout-spacer 强制内容到下一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42270549/
25
4
0
我想要以下代码的 Python 单行解决方案，但是怎么做呢？ total = 0 for ob in self.oblist: total += sum(v.amount for v in o
今天和大家一起学习一种可视化技术：构建树状热力图treemap。树形图易于可视化，且易于被人理解。树状图通过展示不同大小的矩形，以传达不同大小的数据量，一般认为，较大的矩形意味着占总体的一大部分，而较
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
我有一个声明 $set eq "Y" ? $set = "N" : $set = "Y"; 但不管它总是设置为 "N" # Toggle setting if ($set eq "Y") { $
当我尝试在我的服务器上上传一个 php 文件时，我收到一条消息:"Parse error: ..." 我知道这是什么意思，但问题是别的。 如果我在本地服务器上编辑文件(我的计算机上安装了 XAMPP)
我是 python oneliner 循环的新手。 我希望用户将数据输入到二维列表中，同时提醒他他们将输入的数据索引。我的代码是: flag=0 x=[[int(input("enter the "+
尝试在变量之前和之后打印字符串。C 是否有能力使用一条语句来显示此输出？ 这有效: float value = 5; printf("\nThe value of %f", value); print
我正在验证我创建的 MySQL 数据库的结果，为此，我需要一些屏幕截图。 例如，以下查询: select distinct run_ID from ngsRunStats_FK.failedRuns
有人可以解释一下这个 JS LINE 吗？数据是一个对象。 var list = data == null ? [] : (data.wine instanceof Array ? data.wine
如何在一行中添加三个下拉菜单。我想把我的日、月和年放在一行中，但不能这样做。任何帮助将不胜感激。我附上我的 jsfiddle . .... 最佳
我正在尝试使用 html 将 iframe 的高度设置为 100%(我已成功完成)，但我还在顶部添加了一行额外的文本，所以它太高了 ~16px(这需要一个滚动条)。有没有办法更改 iframe 以显示
这是一个示例，我从文件中读取行作为字符串，以使整个文件作为字符串数组: String[] ArrayOfStrings = (new Scanner( new File("log.txt") ).us
我有一个包含大量定义的配置文件，用于在编译期间包含模块。此外，这意味着我必须经常检查代码内部的定义。每张支票需要 3 行，是否可以在一行中执行此操作。 #if FUNC_ENABLED functio
我正在尝试制作一个水平列表，其中每个 列表中的 s 的高度为 385px，宽度为 400px。 我尝试使用 inline-block 使列表水平排列，但这似乎不起作用。也就是说，我的意思是列表仍然是垂
这很烦人，我有一个带有 css 文件的 wordpress 主题，所有内容都在一长行中。我想知道为什么有人会那样做。现在我已经升级了，我需要将旧文件与新文件进行比较，以便我可以接受更改。 Meld、d
我有一个对象数组，其中每个对象都有一个 search_order 属性。我要检查数组并将所有对象的属性增加 1这是简单的方法: res = [] for r in array: r.searc
我在某些服务器上遇到许多具有相同内容和相同名称的文件。我需要隔离这些文件进行分析，所以我不能只删除重复项。操作系统为Linux(centos和ubuntu)。 我枚举文件名和位置并将它们放入文本文件中
你能在不抛出错误的情况下解决这个问题吗？答案是单线。这是来自一个死的职位发布，在回复中要求回答。我认为这是剔除受访者的聪明方法，但我似乎无法在不出错的情况下回答它。 显而易见的解决方案: f.moo(
这个问题在这里已经有了答案: Is it ok if I omit curly braces in Java? [closed] (16 个答案) 关闭 9 年前。 我在 java 中使用没有大括号
我在这里试图用 python 制作一个简单的计算器，我想知道是否可以在命令运行时将前 3 行合并为一行。我的意思是；我不必按 Enter 键来键入下一个数字/运算符，而是按空格键(在输入部分)。 wh
我是一名优秀的程序员,十分优秀！