Q&A
質問とは関係ないですがiOSにブラウザ間の差異など存在しません。
全てSafariと同じ表示になります。
前提・実現したいこと
要素を横並びにする。flex-boxじゃなくてもいいのですが、下記の３点を同時に実現したいです。
①要素を横並びにする。
②各要素はそれぞれ上下中央揃え
③１つの要素は高さ幅固定
現在の状況
該当のソースコード
html
1<details> 2 <summary> 3 <span>1</span>タイトル 4 </summary> 5 <p>内容</p> 6</details>
css
1details span{ 2 width: 40px; 3 height: 40px; 4 background: #fff; 5 font-size: 20px; 6 border-radius: 50px; 7 margin-right: 17px; 8 display: flex; 9 justify-content: center; 10 align-items: center; 11 flex: none; 12} 13 14details p{ 15 font-size:16px 16} 17 18summary { 19 cursor: pointer; 20 display: flex; 21 align-items: center; 22 padding: 22px ; 23 background: #ccc url("/img/icon.png") no-repeat right center ; 24} 25 26summary::-webkit-details-marker { 27 display: none; 28} 29 30
試したこと
要素２つとも幅を決めたり、no-wrapをかけたり、念押しでflex-direction:rowをかけてもうまくいかず、
flex-boxを使わずfloatにしてもcolumn-countにしても、うまく１つの要素の高さ幅を固定にしたままの２つの要素の上下中央揃えが実現できませんでした。
補足情報
PC、Androidともに想定通りの動きです。
iPhoneのみ要素が縦並びになってしまいます。
ブラウザはSafari、Chromeと関係なく縦並びになってしまいます。
回答1件
0
ベストアンサー
どうやら、iOS Safari のバグのようですね。
Demo 9.3.a shows that <summary> elements dont work in Safari.
summary要素に対するバグですから、何かでラップして、ラップ要素にflexのスタイルを付与すれば解決するかと思います。
投稿2019/10/04 01:27
編集2019/10/04 01:40
総合スコア36928
ご回答ありがとうございます。
コメントと頂いたリンク先を拝見し、divで囲うことで解決致しました。
<summary>
<div>
<span>1</span>タイトル
</div>
</summary>
あなたの回答
tips
プレビュー
