Q&A
ご回答ありがとうございます！試してみたところ、番号とテキストの隙間を解消することができました！
前提
Webページにリストを表示させています。
ですが、ol要素の番号とリスト項目が離れてしまい、理想通りの表示にならず困っています。
単純な間違いだとは思うのですが、知識不足のため分かりません。
恐れ入りますが、どなたかご教授お願いいたします。
実現したいこと
以下の画像
INDEXのol要素の番号とリスト項目部分の間隔を
このように縮めたいです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>模写コーディング３</title> 8 <meta name="description" content="text text text text text"> 9 <link rel="stylesheet" href="./assets/style.css"> 10</head> 11<body> 12 13 <div class="container"> 14 15 <header class="headder"> 16 <a href="index.html"><img class="headder-logo" src="./assets/img/logo.svg" alt="logo"></a> 17 </header> 18 19 <main class="main"> 20 <div class="mainvisual"> 21 <img src="./assets/img/mainvisual.jpg" alt="mainvisual"> 22 </div> 23 24 <div class="inner"> 25 26 <section class="wrapper"> 27 <h1 class="inner-title">INDEX</h1> 28 <div class="content"> 29 <ol> 30 <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> 31 <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> 32 <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> 33 <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> 34 <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> 35 </ol> 36 </div> 37 </section> 38 39 40 <section class="work-wrapper"> 41 <ul> 42 <li><img src="./assets/img/photo1.jpg" alt="photo1"></li> 43 <li><img src="./assets/img/photo2.jpg" alt="photo2"></li> 44 <li><img src="./assets/img/photo3.jpg" alt="photo3"></li> 45 <li><img src="./assets/img/photo4.jpg" alt="photo4"></li> 46 </ul> 47 </section> 48 49 <section class="wrapper"> 50 <h1 class="inner-title">DETAIL</h1> 51 <div class="detail"> 52 <div class="detail-content"> 53 <dl> 54 <dt> 55 著者： 56 </dt> 57 <dd> 58 タイトルタイトルタイトル 59 </dd> 60 61 <dt> 62 出版社： 63 </dt> 64 <dd> 65 タイトルタイトルタイトル 66 </dd> 67 68 <dt> 69 発行年： 70 </dt> 71 <dd> 72 ２０２１年１月１日 73 </dd> 74 75 76 77 </div> 78 79 <div class="text"> 80 <p class="first-text"> 81 テキストテキストテキストテキストテキストテキストテキストテキスト<br> 82 テキストテキストテキストテキスト 83 </p> 84 85 <p class="second-text"> 86 テキストテキストテキストテキストテキストテキストテキストテキスト<br> 87 テキストテキストテキストテキスト 88 </p> 89 90 <a href="index.html" class="link">オンラインストアで見る</a> 91 </div> 92 </div> 93 </section> 94 95 </div> 96 </main> 97 98 <footer class="footer"> 99 <p>© 2021 PHOTO BOOK 2</p> 100 </footer> 101 102 </div> 103 104</body> 105</html> 106 107
css
1@charset "UTF-8"; 2/*----------全体------------*/ 3html { 4 font-size: 100%; 5} 6 7* { 8 margin: 0; 9 10} 11 12 13.container { 14 max-width: 1000px; 15 margin: 0 auto; 16} 17 18.inner { 19 max-width: 800px; 20 margin: 0 auto; 21 text-align: center; 22 23} 24 25.wrapper { 26 margin-top: 100px; 27 background-color: rgb(221, 218, 218); 28 padding: 50px 0 50px 0; 29} 30.inner-title { 31 font-size: 1.6rem; 32 font-weight: bold; 33} 34 35.content { 36 border: 1px solid #000; 37 margin: 60px; 38 padding: 30px 0; 39} 40 41-------省略--------------------- 42 43/*---------index--------*/ 44 45.content ol { 46 47} 48 49.content li { 50 font-size: 0.8rem; 51 padding-top: 10px; 52 53} 54 55-------省略---------------------
試したこと
・.content li {
font-size: 0.8rem;
padding-top: 10px;
text-align: left; /追加/
}
番号との間の空白は解消されますが、全体が左寄せになってしまいます。
その後、
.content ol {
text-align: center;
}
などいくつか試してみましたが、変化ありません。
・.content ol {
text-align: right;
}
変化なしでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
text-align: center; でテキストを中央寄せしているのが原因ですね。
list-style-position: inside;で番号とテキストの隙間はなくなりますが、リスト項目のテキスト長が同じとは限らないと思いますので、その場合、番号の位置が揃わなくなります。
番号の位置を揃えて、全体を中央寄せしたいなら、Flexレイアウトを使うといいでしょう。
css
1/*---------index--------*/ 2.content { 3 display: flex; 4 justify-content: center; 5} 6.content ol { 7 padding-left: 20px; 8} 9.content li { 10 font-size: 0.8rem; 11 padding-top: 10px; 12 text-align: left; 13}
投稿2022/12/20 13:10
総合スコア34345
0
ol li{
list-style-position: inside;
}
これでいかがでしょうか？
投稿2022/12/19 16:08
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/12/20 14:38