How to force some objects to be on two separate lines?

I have a HTML list with this style:

font-weight: bold;
padding: 0px;
margin: 0px;
list-style-type: none;
display: block;
width:700px;
font-size: 14px;
white-space: pre-wrap;

and the cells have this style:

开发者_JS百科

display: inline;

and I have spacer cells between each cell with this style:

padding-right: 20px;
display: inline;

My problem is that when the list is too long for its 700 pixels, it wraps. I want this, but I don't want the objects to be on two separate lines. I have tried the CSS white-space property, but nothing seems to work.

---

I think what you want is to get rid of at the spacing list items (please don't call them cells), and put a margin-right on the list item style. You want margin, which can get eaten by the browser at the container edge, not padding, which cannot.