<ul>の幅について

Question

前提・実現したいこと

<ul>を利用して  のようにずらして表示したいのですが |←x→|a xの幅が広すぎるためレイアウトが崩れてしまいます。

該当のソースコード

<ul>a
<br>
<ul><ul>b
<br>
<ul><ul><ul>c

試したこと

cssで幅指定などもしてみましたが反映されませんでした。

グダグダな説明ですがよろしくお願いします。

Comments

[yoshinavi]

タグの使い方が間違っていると思います。

[yaschi]

yoshinaviさん 確かに<ul>タグを追加するのを忘れていました。ご指摘ありがとうございます。

[yoshinavi]

スミマセン。私の言葉足らずでした。　全体が不明なので、何とも言えない部分はありますが、＜/ul＞タグの有無が問題では無く、＜ul＞タグはメニューなど箇条書き（リスト）を表すタグになりますので、メニュー等で無い場合や、提示のコードみたいな使い方に＜ul＞タグは適さないです。

Answer 1

ulの直下にはliしか置けないので、ul-liの構造でやるしかないです
あとはスタイルシートで調整

<style>
ul{list-style:none;margin:0px;padding:0px;}
li{margin-left:10px;}
</style>
<ul>
  <li>a
  <ul>
    <li>b
    <ul>
      <li>c</li>
    </ul>
    </li>
  </ul>
  </li>
</ul>

Comments

[yaschi]

実現したいものができました。ありがとうございました。

Answer 2

aの中にbが含まれ、さらにそのbの中にcが含まれる　という意味なら、以下が適当かと思いますがいかがでしょうか？

<ul>
  <li>a
    <ul>
      <li>b
        <ul>
          <li>c</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 3

<ul>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ul>

まずは普通にリスト化した方が良いと思います。

Comments

[yaschi]

たしかに<ul>を足すのを忘れていました。回答ありがとうございました。