如何用css包装UL列表 - LIs在新行上

Question

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

Answer 1

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.

Answer 2

display: inline; or display: inline-block;

Both works.