実現したいこと
入力した文章をデスクトップ版で確認すると配置がズレてしまうのを直したい。
発生している問題・分からないこと
[aside]記入したli文章をデスクトップ版で確認すると縦書きに変更され[cotegory]と[Archives]の横に移動してしまいます。正しくは横書きで[cotegory]と[Archives]の下にli文章を持っていきたいです。[aside]タグのサイズを小さく指定したり配置を変更したりすると縦書きになってしまいます。該当ソースコードに不備があるかと思いますがご教授頂けますと幸いです。
該当のソースコード
HTML
1 <aside class="sidebar"> 2 <h3 class="heading-medium font-english">category</h3> 3 <ul class="side-menu"> 4 <li><a href="#">お店の紹介</a></li> 5 <li><a href="#">期間限定メニュー</a></li> 6 <li><a href="#">お客様との会話</a></li> 7 </ul> 8 9 <h3 class="heading-medium font-english">Archives</h3> 10 <ul class="side-menu"> 11 <li><a href="#">2023年</a></li> 12 <li><a href="#">2022年</a></li> 13 <li><a href="#">2021年</a></li> 14 <li><a href="#">2020年</a></li> 15 </ul> 16 </aside>
CSS
1/* デスクトップ版 2 ----------------- */ 3 @media (min-width: 800px) { 4/* サイドバー */ 5.sidebar{ 6 display: flex; 7} 8.side-menu{ 9 list-style: none; 10 text-align: center; 11 margin-bottom: 4rem; 12} 13.side-menu li{ 14 border-bottom: 1px solid #c9c2bc; 15} 16.side-menu a{ 17 color: #432; 18 display: block; 19 padding: 1rem; 20} 21.side-menu a:hover{ 22 color: #0db; 23} 24~~~~~~~~~~~~~~~~~~~~~~~~ 25/* NEWS */ 26.sidebar{ 27 width: 22%; 28 order: 3; 29} 30.sidebar .heading-medium{ 31 line-height: 1; 32 margin-bottom: 1rem; 33} 34 }
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
自分で調べましたが答えを得られませんでした。
補足
特になし
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー