I want to align the text in my list element that contains a time element

Question

I have problem because my elements are not well align vertically downward the test after the "-" starts haphazardly.

I have tried enclosing the time tag with div elements and align them so that all the time elements take-up equal space but this does not work it instead separates the <li> into various blocks.

 #time-line{ max-width: 700px; margin:0 auto 0 auto; font-family:Georgia, 'Times New Roman', Times, serif; } ul{ line-height: 2em; }.dates{ font-weight:bold; }

 <section id="time-line"> <h2>Follow His Timeline.</h2> <,--List Element I want to align--> <ul><.--when the code displays the hyphens are not all vertically on a straight line I have tried adding <div> to them and give them a specific with but in does not display them in line it breaks the contain--> <li><time datetime="1901-09-21" class="dates">Sep 21, 1901 - </time></span> Knrumah is born in Ghana.</li> <li><time datetime="1935-08-07" class="dates">Aug 07, 1935 - </time>Moved to America and goes to Lincoln University,</li> <li><time datetime="1939-05-22" class="dates">May 22. 1939 - </time>Graduation from University</li> <li><time datetime="1945-09-09" class="dates">Sep 09, 1945 - </time>Moves to London and he helped to organize the Fifth Pan-African Congress,</li> <li><time datetime="1947-05-11" class="dates">May 11, 1947 - </time>Wrote his first book, <cite id="book-title">"Towards Colonial Freedom"</cite></li>

Answer 1

You can add width to.dates itself and change its display property because width won't wrok for inline elements. I moved the character '-' outside <time> so it looks nicer. You can also wrap this in <span> and give some margin to make space so it looks even more nicer.

 #time-line{ max-width: 700px; margin:0 auto 0 auto; font-family:Georgia, 'Times New Roman', Times, serif; } ul{ line-height: 2em; }.dates{ font-weight:bold; width: 110px; display: inline-block; }

 <section id="time-line"> <h2>Follow His Timeline.</h2> <,--List Element I want to align--> <ul><.--when the code displays the hyphens are not all vertically on a straight line I have tried adding <div> to them and give them a specific with but in does not display them in line it breaks the contain--> <li><time datetime="1901-09-21" class="dates">Sep 21, 1901</time> - Knrumah is born in Ghana.</li> <li><time datetime="1935-08-07" class="dates">Aug 07, 1935</time> - Moved to America and goes to Lincoln University,</li> <li><time datetime="1939-05-22" class="dates">May 22. 1939</time> - Graduation from University</li> <li><time datetime="1945-09-09" class="dates">Sep 09, 1945</time> - Moves to London and he helped to organize the Fifth Pan-African Congress,</li> <li><time datetime="1947-05-11" class="dates">May 11, 1947</time> - Wrote his first book, <cite id="book-title">"Towards Colonial Freedom"</cite></li>