ul {
padding-left: 20px;
list-style-type: disc;
list-style-position: outside;
}
.my_container {
display: flex;
justify-content: flex-end;
}
.my_container {
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
対応方法 : CSS ファイルを読み込んだ後になんかしらの JavaScript を実行すれば OK です。
<link rel="stylesheet" href="/assets_front/css/style.css">
<script>console.log("prevent Google Chrome css Transition");</script>
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
2行を超える場合に ... を表示します。
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
span:not(:last-child) {
margin-right: 25px;
}
span:not(:last-of-type) {
margin-right: 25px;
}
:first-childの定義の勘違いが主な原因です。
最初に現れる子要素、という指定は、指定したプロパティの中で最初に現れるこ要素ということではなく、全てのタグを含めた初めに現れる子要素という意味です。
どうゆうことかというと。
font-family: Meiryo, "Hiragino Kaku Gothic ProN", sans-serif
↓
font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
"Hiragino Sans" を追加する。
font-weight:bold;
↓
font-weight:600;
font-weight:600; に変更する。
引用: https://speakerdeck.com/clockmaker/better-font-family-2019-in-japanese
display: flex; を使用します。
.waku {
padding: 0 15px 0 15px;
width: 400px;
height: 150px;
border: solid red 1px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.elem {
flex: 1;
}
デモ : https://pgmemo.tokyo/livedemo/css_flex_vertical_center/css_flex_vertical_center.html
まとめて指定する例:
background:
url("waku_border.svg") 0px 65px repeat-x,
url("waku.png") 0px 70px repeat-x;
別々に指定する例:
background-image:
url("waku_border.svg") ,
url("waku.png");
background-position:
0px 65px ,
0px 70px;
background-repeat:
repeat-x,
repeat-x;
html
<div class="myimg">風景写真。このテキストは非表示になります。</div>
scss
.myimg {
background: url("#{$img_folder}/xxxxx.jpg") 0 0 no-repeat;
height: 0;
padding-top: 75.15%; // 画像の高さを100%とした時の画像の幅%
background-size: contain;
overflow: hidden;
text-indent: -100%;
white-space: nowrap;
}
html
<div class="myimg">風景写真。このテキストは非表示になります。</div>
scss
.myimg {
width: calc( 50vw - 20px );
width: calc( (50vw - 20px) * 0.7515 );
background: url("#{$img_folder}/xxxxx.jpg") 0 0 no-repeat;
background-size: contain;
overflow: hidden;
text-indent: -100%;
white-space: nowrap;
}
How To Create a Pure CSS Dropdown Menu こちらで紹介されています。
デモ
https://line25.com/wp-content/uploads/2012/css-menu/demo/index.html