CODEWITHSUNDEEP
css
Harsimran Singh
Harsimran Singh

Reputation: 738

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

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%;
}

enter image description here

Upvotes: 3

Views: 19485

Answers (2)

Harsimran Singh
Harsimran Singh

Reputation: 738

display: inline; or display: inline-block;

Both works.

Upvotes: 1

Peter
Peter

Reputation: 956

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.

Upvotes: 9

Related Questions