How to have a linebreak within an display:inline list tag?

I would like to have the开发者_如何学编程 list items display horizontally and I want to have a line break (like <br />) within the item. What is the easiest way to do it?

I'd say that what you really want is an inline block:

li{
    display: inline-block;
}

I'm not entirely sure what you mean, please feel free to include some of your code, but what I'm guessing is that you want horizontal <li> items on two lines, and the easiest way is probably to just create a new list;

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
</ul>
    <!-- ending and starting a new list rather than using <br> --> 
<ul> 
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
</ul>

css:

li { display: inline; }

Use float: left instead display: inline.

<style type="text/css">
<!--
  ul.inline li{
    float: left;
    list-style: none;
  }
//-->
</style>

...

<ul class="inline">
  <li>A text</li>
  <li>A text <br />More text</li>
  <li>A text</li>
  <li>A text</li>
  <li>A text</li>
  <li>A text</li>
</ul>

You may want to use a fixed width for those li's.

Result (Firefox 5):