Display items left to right & limit items per column

Question

Hopefully these actually ARE basic questions with simple answers.
1. By default requested values of repeating nodes stay in a vertical table setting. How do you to display a repeating spry {values} in a horzonital format?
     EX: Left to right <p /> Left to right <p /> etc. (see below)
2. Once this is accomplished, if the value is text, will it 'word wrap' by default and treat the spry {value} as regular text? If so, how do you treat that text as a "whole" so the spaces aren't recognized?
3. How do you LIMIT the number of repeated {values} a column (or div) contains and populate a new column if the {value} is more than your set limit?
     EX: Populate first 4 items  | create column | populate next 4 items | create column | etc.
Still learning but hopefully simple answers will apply here. Example code is much appreciated.
-LH-

Answer 1

1, you have a couple of options..
- use a table to loop horizontal
example:
<div spry:region="ds1">
     <table>
          <tr spry:repeatchildren="ds1">
               <td>{item}</td>
          </tr>
     </table>
</div>
Or use floats to float all items left Combined..
example:
<div spry:region="ds1">
     <ul spry:repeatchildren="ds1">
          <li>{item}</li>
     </ul>
</div>
CSS:
ul li { float: left; }
2, i don't really understand what you mean with that.
3. use spry:if statements for that..
<div spry:region="ds1">
     <ul spry:repeatchildren="ds1">
          <li spry:if="{ds_RowID} < 5 ">{item}</li>
     </ul>
<ul spry:repeatchildren="ds1">
          <li spry:if="{ds_RowID} > 5 && {ds_RowID} < 10  ">{item}</li>
     </ul>
</div>