How to display an HTML list non-nested?


Tags: html,css

Problem :

Here's the HTML

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

Here's what it looks like now:

Salads Fruits
   Apples Prunes
Main Course

And here's what I'd like it to look like:

Salads Fruits Main Course
Apples Prunes

How can I achieve this, without modifying the HTML?

Current CSS:

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


Solution :

This results in the display:

Salads Fruits Main Course
      Apples Prunes

Here is the CSS I used.

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

li {
    display: inline;
}

If you don't want the individual fruits to start a little way across the page - remove the padding with this style rule:

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

All of the above will still work if you nest more items too. For example:

<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>

    CSS Howto..

    How to hide elements in mobile devices? CSS

    How to do line animation using CSS and SVG

    How to keep two divs and images inside them to be side by side on browser resize?

    How to select all a pseudo-classes in CSS?

    How can I create a CSS selector to select when a link does not have a class of folder or start class starting with title?

    How to select loose text between tags

    How to place differently sized images in 2 columns with figcaption aligned

    Change Color Themes - How To Prevent the Site Goes Back to Default

    Show image when hovering on a span

    How to align the header menu from left? i see a unexpected margin on left. Help please

    How to make a hidden (ng-cloaked) item preserve the space it takes up when its visible

    Show missing CSS in Google Chrome

    Table: how to change pictures on mouseover on single rows?

    Show text underneath image while hovering without disrupting other elements

    How to set height to wrap text only in certain screen size

    How to set gulp autoprefixer that it will be prefix css when I save my project

    How to position div underneath dynamic ul

    Find how an element's css has changed after jQuery “toggle” function has been used

    How do I use pseudo-classes to select all children except first and last?

    How to repeat a CSS shape horizontally?

    How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?

    How to remove a element after animation?

    How to add styles programmatically?

    How to read inline styling of an element?

    How to call static block with styles.css

    How To Make Navigation With Images That Is Clickable?

    How can I attach a method to an object to change CSS

    how to select a sibling element when hovering in CSS?

    html, svg, css how to make mouse event not fire on transparent color

    How do you style TextFlow with CSS Styles in Flex 4.5.1?