箇条書きの文章内での位置の揃え方を教えてください！

タイトル1
・文章1 　　結果１
・文章００００結果２
・文章10 　結果３

タイトル2
・文章3 結果１
・文章199 結果２
・文章2 結果３

少しずれてしまっていますが、上記のような箇条書き文を作成しています。
色々調べてやってみているのですが、黒丸の点を入れて作成しようとするうまくいかず…
ご教示のほど、宜しくお願いいたします！

追記：画像を添付いたしました。
上の画像のものでは一列ずれて表示される。
下の画像では、行が空き過ぎてしまう。<br>を無くしてもうまく表示されませんでした。

![]

m.ts10806

2019/05/08 03:18

実際にやってみた（うまくいっていない）コードと画面キャプチャをご提示ください。またTableViewタグをつけられていますが、どの言語・OS・環境を想定されてこのタグを選ばれましたか？質問に具体的に記載してください。

退会済みユーザー

2019/05/08 03:30

ご連絡ありがとうございます！初心者でわかっていない部分もあり申し訳ございません… HTMLでお願いいたします。OSはマックです。WordPressで作成しようとしています。どうぞ宜しくお願いいたします。

m.ts10806

2019/05/08 03:43

いえ、あの。自身で何かしらコードを組んでいて「できてない」んですよね？ですからそのコードと「うまくいっていない」ことがわかる情報、例えば画面キャプチャなどを質問本文に追記してくださいと、こちらがお願いしています。この内容だけだと「やりたいことだけを記載した丸投げの質問」として非推奨ですので、自身が試したこと調べたことその詳細を具体的に記載してください。

yasutomi

2019/05/08 04:14

ほかの方がすでに説明されている通り「黒丸の点を入りのうまく表示されないHTMLコードとCSS」が記載されていないと解決不可能です。

退会済みユーザー

2019/05/08 04:30

＞mts10806さん上記で返信したと同時に質問を更新したつもりが、更新できておらず画像が添付できていませんでした。失礼いたしました。

kei344

2019/05/08 04:38

コードはスクリーンショットでなくコードブロックにテキストでお書きください。

yasutomi

2019/05/08 04:42

質問の仕方をご存じないようですのでこちらを熟読することをおすすめします。 https://teratail.com/help/question-tips

行動規範の内容に同意します

回答1件

ベストアンサー

こういう場合は CSSでやると思います。

私なら、

例えば

文章用クラス: textc
結果用クラス: resc

としておきます。

textc の width を例えば 100px, resc の width は 200pxとし、
両方ともtext-alignを center にしておく。

...みたいに自分のイメージになるようにやっていく。

そして、HTML側ではspan辺りにclassを付与して囲む。

CSS
1span.textc{
2   with: 100px;
3   text-align: center;
4}
5span.resc{
6   with: 200px;
7   text-align: center;
8}

HTML
1<ul type="square">
2   <li><span class="textc">文章1</span><span class="resc">結果1</span></li>
3   <li><span class="textc">文章2</span><span class="resc">結果2</span></li>
4</ul>

textc と resc の間に1px以上空けたいなら padding とか marginとかで制御。

もし、そのままだと