How to wrap UL list - LIs on new line with css

css

Solution

Try this

.menu li {
    display: inline-block;
}

Decent support and here's a nice round up.

If there's a

- `margin-left` try not to set the width to `100%`, but rather `100% - margin-left-value`

- `padding-left` use `box-sizing: border-box`

If you don't have to support older browsers or are fine with loading a polyfill, flexbox model would do the job.

Problem

Here in the image below the list is going out of the screen. I need to block the width of the ul. Width applied but going out of the ul width. Current CSS Used: ``` .menu ul{ width:100%; max-width:100%; } ```

Original source