CSS Exercise

Writing a list of strings to the screen, formatted in a particular way:

Requirements

1. The messages must be written to the center of the screen with equal margins on the right & left.
2. Each message must be on it's own row.
3. The entire list must have a solid rectangular background which encapsulates each individual row (I've given each row a bg of yellow just to help illustrate the examples).
4. The entire list must not have a fixed width, and must stretch to accomodate the content of the widest row.
5. I want to achieve this with an unordered list.

Example #1 (wrong)

The table is only as wide as it needs to be, and each row is on it's own line. This example works, but it requires the use of a table. Breaking requirement #5.

Example #2 (wrong)

The unordered list needs a fixed width in order to keep row 2 on it's own line. Breaking requirement #4.

• Row 1 is longer than row2
• Row 2

Example #3 (wrong)

If I make the list elements inline, they no longer separate to rows. Breaking requirement #2.

• Row 1 is longer than row2
• Row 2

Example #4 (wrong)

If I make the ul inline, but the li's block, the ul no longer wraps them with the background correctly. Breaking requirement #3.

• Row 1 is longer than row2
• Row 2

Example #5 (correct)

Thank you EVDAWG!!

• Row 1 is longer than row2
• Row 2

Example #6 (correct)

Thank you Inky!!