[英]MDL mdl-layout-spacer forcing content to next line
This is a pretty basic Material Design Lite question, but this has been driving me crazy. 这是一个非常基本的Material Design Lite问题,但这一直让我发疯。 In the following example from the MDL examples website , the
div
with class mdl-layout-spacer
nicely positions the elements after it to the right of the containing div
. 在MDL示例网站的以下示例中,类为
mdl-layout-spacer
的div
将元素很好地mdl-layout-spacer
在包含div
的右侧。 Note the calendar icon is at the right: 请注意日历图标在右侧:
<!-- 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>
Now to the problem. 现在解决问题。 I have tried the
mdl-layout-spacer
technique in a few different situations in my site, but it only seems to be working for icons in the site header. 我曾在网站的几种不同情况下尝试过
mdl-layout-spacer
技术,但它似乎仅适用于网站标题中的图标。 See in this pic how the badge icon is on the right: 在此图片中查看徽章图标在右侧的位置:
I want to be able to use this technique in cards, but it doesn't seem to work. 我希望能够在卡片中使用此技术,但它似乎不起作用。 I created a JSFiddle example using the following html.
我使用以下html创建了一个JSFiddle示例 。 Using the
mdl-layout-spacer
, I would expect the word "today" to be positioned to the right of the containing div, but as you can see it goes down to the next line. 使用
mdl-layout-spacer
,我希望“ today”一词位于包含div的右侧,但是如您所见,它会向下移动到下一行。
Am I missing something? 我想念什么吗? Should I be able to use the spacer like intended or do I need to discard this ambition?
我应该能够像预期的那样使用垫片吗?还是需要放弃这种野心?
<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>
No, that's not true. 不,那不是真的。
mdl-layout-spacer
class is not specific to icons. mdl-layout-spacer
类并非特定于图标。 Check this codepen example I have created. 检查我创建的这个Codepen示例 。 I have used text instead of icon and it's working fine.
我使用文字而不是图标,并且效果很好。
In the card example, you have used styles: 在卡片示例中,您使用了以下样式:
.demo-card-event>.mdl-card__actions {
display: flex;
box-sizing: border-box;
align-items: center;
}
This is the code that is pushing the element to the right. 这是将元素推向右侧的代码。 Checkout this JsFiddle I used the same css to fix your example.
签出这个JsFiddle我使用了相同的CSS来修复您的示例。
Edited: Your example is not working because, your element does not have display: flex
css. 编辑:您的示例不起作用,因为,您的元素没有
display: flex
css。 So just add this css to the parent class: 因此,只需将此CSS添加到父类中即可:
.mdl-card__supporting_text {
display: flex;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.