material design liteのCARDSを読みながら試しに作ってみた。
<body>
<div class="mdl-layout mdl-js-layout">
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
</div>
</div>
</main>
</div>
</body>確かにこれで表示されたのですが、右によっちゃって、なんだか不恰好。そこで、下のようにclass="mdl-cell--12-col"を追加してもまだ右側に余白が表示されてしまった。
<body>
<div class="mdl-layout mdl-js-layout">
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-card mdl-shadow--2dp mdl-cell--12-col">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
</div>
</div>
</main>
</div>
</body>最後に、mdl-grid--no-spacingを追加したら、width=100%で表示されましたー。<body>
<div class="mdl-layout mdl-js-layout">
<main class="mdl-layout__content">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-card mdl-shadow--2dp mdl-cell--12-col">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
</div>
</div>
</main>
</div>
</body>ただ、100%なので、ちょっと余白が欲しい場合は、paddingを追加すればおｋ<body>
<div class="mdl-layout mdl-js-layout">
<main class="mdl-layout__content">
<div class="mdl-grid mdl-grid--no-spacing" style="padding:10px 10px;">
<div class="mdl-card mdl-shadow--2dp mdl-cell--12-col">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
</div>
</div>
</main>
</div>
</body>
0 コメント:
コメントを投稿