отображать все списки подуровней, встроенные в css

Question

если у меня есть такой список:

<ul>
  <li>
    item name
    <ul>
      <li>
        item name
      </li>
      <li>
        item name
        <ul>
          <li>
            item name
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

И, например, я хочу, чтобы каждый "li" отображал встроенный текст, как и все одно предложение ... Мне нужно это для хлебных крошек ...

Я пробовал это:

ul li {
  display: inline;
  float: left;
}

Но это не сработает, потому что "ul" или "li" не имеют определенной ширины, поэтому он становится меньше.

Любая помощь приветствуется, Спасибо!

Answer 1

Это работает:

ul{display:inline;} ul li{display:inline;} ul li ul li{display:inline;}

jsfiddle: http://jsfiddle.net/naveed_ahmad/QWshN/

Answer 2

Вы хотите, чтобы только внешний ul был элементом уровня блока, поэтому, чтобы сделать все другие элементы встроенными элементами, вы можете использовать:

/*  both the inner ul's and the li's */
ul ul,
li
{
  display:inline;
}

или, если вы хотите вместо этого плавать:

ul
{
  overflow: hidden;    /* make sure the uls wraps around their contents, mainly for outer ´ul´ */
}
ul ul,
li
{
  float: left;
}

Answer 3

Я думаю, что это сексуальнее:

ul, li {
    display: inline-block
}

http://jsfiddle.net/jzVcE/

Answer 4

Используйте ul ul li в качестве селектора, если вы хотите, чтобы стилизовались только вложенные UL. Вам также, вероятно, не нужно float: left.

Answer 5

Просто текст внутри элементов <li> заставляет текст вести себя как сам элемент блочного уровня (эффективно оборачивая каждый набор текста в тег <p>).Если вы оберните текст, например, в <span>, а также сделаете интервал inline, , вы получите желаемый результат

Также используйте ul, li, span в качествеселектор вместо ul li

---

Редактировать:

На самом деле, если вы просто измените свой исходный CSS на:

ul, li {display: inline}

, он будет работать отлично.