scss レスポンシブ:リスト Posted 2021-05-17
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss レスポンシブ:リスト相关的知识,希望对你有一定的参考价值。
レスポンシブ:リスト
----------
A [Pen](https://codepen.io/anonie/pen/ZEzKRjY) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).
[License](https://codepen.io/anonie/pen/ZEzKRjY/license).
<div class="inner">
<div class="p-update-list">
<ul>
<li class="p-update-list__item"><div class="p-update-list__date">2019.05.30</div><div class="p-update-list__cate">カテゴリ</div><h2 class="p-update-list__link"><a href="#">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまもむめもらりるれろわをんあいうえおかきくけこさしすせそ</a></h2></li>
<li class="p-update-list__item"><div class="p-update-list__date">2019.05.30</div><div class="p-update-list__cate">カテゴリ</div><h2 class="p-update-list__link"><a href="#">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまもむめもらりるれろわをんあいうえおかきくけこさしすせそ</a></h2></li>
<li class="p-update-list__item"><div class="p-update-list__date">2019.05.30</div><div class="p-update-list__cate">カテゴリ</div><h2 class="p-update-list__link"><a href="#">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまもむめもらりるれろわをんあいうえおかきくけこさしすせそ</a></h2></li>
</ul>
</div>
</div>
*, *::before, *::after { box-sizing: border-box; }
body { background: #eee; }
.inner {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.inner { background: #fff; margin: 3rem auto; padding: 3rem; } // 視認性用
.p-update-list__item { // li
display: flex;
align-items: center;
margin: 1em 0;
height: 1em;
@media only screen and (max-width: 767px) {
display: block;
margin: 1.5em 0;
height: 3em;
}
}
.p-update-list__date {
display: inline-block;
min-width: 6.5em;
// @media only screen and (max-width: 767px) {
// width: auto;
// }
}
.p-update-list__cate {
display: inline-block;
min-width: 10em;
background: #ccc;
font-size: 70%;
padding: 0.5em 3em;
@media only screen and ( min-width: 768px ) {
margin-right: 2em;
}
}
.p-update-list__link { // h2
display: inline-block;
overflow: hidden;
width: auto;
height: 1em;
@media only screen and (max-width: 767px) {
width: 100%;
margin-top: 0.5em;
}
}
.p-update-list__link > a {
display: inline-block;
}
以上是关于scss レスポンシブ:リスト的主要内容,如果未能解决你的问题,请参考以下文章
scss レスポンシブ:テキストエリア固定,イメージエリア伸缩
scss レスポンシブテーブル
scss 谷歌地图のiframe版をレスポンシブに対応させる
html レスポンシブ画像
html レスポンシブ画像
html レスポンシブ的GoogleMap