フォルダ階層

Question

HTMLでフォルダ階層をかいていて

<p>src/<br>
    └ main/<br>
       ├ java/<br>
       │ └ com/<br>
       └ resources/<br>
</p>

このように書いて、main下からまた伸ばしたいんですが、表示すると

このように左によってしまいます。解決方法を教えて下さい。

Answer 1

どうせならこんなふうにしたほうがよいのでは？

ul,li{list-style:none}
ul{padding:0px;}
li{padding-right:0em;padding-left:1em;}
input[type="checkbox"] + span + ul{display:none;}
input[type="checkbox"]:checked + span + ul{display:block;}
input[type="checkbox"]:disabled{visibility:hidden;}

<ul>
  <li><input type="checkbox"><span>src/</span>
  <ul>
    <li><input type="checkbox"><span> main/</span>
    <ul>
      <li><input type="checkbox"><span>java/</span>
      <ul>
        <li><input type="checkbox" disabled><span>com/</span>
        </li>
      </ul>
      </li>
      <li><input type="checkbox" disabled><span>resources/</span>
      </li>
    </ul>
    </li>
  </ul>
  </li>
</ul>

下位ディレクトリを持たないディレクトリのcheckboxにはdisabledを指定

Comments

[ryo-dev]

少し用途が違います

Answer 2

<pre>タグで囲めば空白文字や改行も入力した通りにレイアウトされます。

Answer 3

preタグを使うといいでしょう。

<pre>
   src/
    └ main/
       ├ java/
       │ └ com/
       └ resources/
</pre>

Comments

[ryo-dev]

preで書いたんですが、表示位置が、左寄せになってないんですが、左寄せはどうすればいいですか？

[intelf___]

preタグは、スペースやタブなどの通常では省略される文字をそのまま表示するタグです。
左側のスペースやタブをそのまま消してしまえば左詰めになります。

---コメント欄ではインデントが消えるため削除しました---

CSSでpreタグのmarginやpaddingやtext-alignのプロパティを操作している場合はそれを消してください。

[ryo-dev]

出来ました。ありがとうございます。ベストアンサーに決めさせてもらいます。