Как вывести список HTML без вложенности?

Question

Вот HTML

<ul>
    <li>Salads</li>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Prunes</li>
        </ul>
    </li>
    <li>Main Course</li>
</ul>

Вот как это выглядит сейчас:

<b>Salads Fruits</b>
   Apples Prunes
<b>Main Course</b>

А вот как бы я хотел, чтобы это выглядело:

<b>Salads Fruits Main Course</b>
Apples Prunes

Как мне этого добиться, без изменения HTML?

Текущий CSS:

ul {
    list-style:none;   
    display:block;
}
li {
    display:inline-block;
}

Answer 1

Это приводит к отображению:

Salads Fruits Main Course
      Apples Prunes

Вот CSS, который я использовал.

ul {
    list-style:none;   
    display:block;
    float: left;
    clear: both;
    width: 100%;
}

li {
    display: inline;
}

Если вы не хотите, чтобы отдельные фрукты начинались немного по всей странице, удалите отступы с этим правилом стиля:

ul > li > ul {
    padding-left: 0;
}

Все вышеперечисленное будет работать, если вы вложите больше предметов. Например:

<ul>
    <li>Salads
        <ul>
            <li>Green Leaf</li>
            <li>Chicken</li>
        </ul>
    </li>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Prunes</li>
        </ul>
    </li>
    <li>Main Course</li>
</ul>

Answer 2

Вы должны ввести ul внутри li и li внутри ul,

Посмотреть демо здесь . Надеюсь, это поможет.

CSS для быстрого просмотра:

ul {
    list-style:none;   
    display:block;
    float: left;
    clear: both;
    width: 100%;
}
li {
    display: inline;
}
ul > li > ul {
    padding-left: 0;
}

Answer 3

вам нужно будет применить стили к ULs IN LIS. Попробуйте это

ul li    {
    float: left;        
}