I need to adjust the alignment of the text within my list item that includes a time element

I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized.

I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Instead, it caused the li elements to be separated into different 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>

htmlcss

Answer №1

One way to improve the appearance of the timeline is by adding width to the .dates element and changing its display property. Inline elements do not respond well to width adjustments, so it's best to use inline-block instead. I also suggest moving the character '-' outside of the <time> tag for better alignment. To enhance the aesthetic further, wrap the content in a <span> tag and add some margin for spacing.

#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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update options in HTML form dropdowns dynamically based on selections from other dropdowns using Node.js

In my Node.js application, I have the following file system structure: public elegant-aero.css stadium-wallpaper.jpg team-results.html public.js app.js teamresults.mustache I am trying to dynamically populate a dropdown menu based on user sele ...

htmlnode.jsformsexpressvalidation

Issues with PHP login/logout functionality found - PHP

My login/logout php code is not displaying correctly in my navigation bar. I want the navbar to show 'logout' when the user is logged in, and vice versa. On top of my header.php page: <?php session_start(); require "includes/dbh.inc.php" ...

phphtmlbootstrap-4

How can I effectively search a text file in PHP and display all the results on a webpage?

I've been experimenting with building a webpage that allows users to search through a .txt file using only html and php. Below is the code I have come up with: <?php $file = 'myfile.txt'; if (preg_match_all($pattern, $contents, $matches ...

phphtml

Storing dynamic content on a server and retrieving it for future use

I'm working on a webpage that allows users to create elements dynamically and I want to save those elements to the server. When someone else visits the page, I want them to see those saved elements as well. I'm not too familiar with web programm ...

javascriptjqueryhtmlajaxjson

Make the minimum height of one div equal to the height of another div

My query is somewhat similar to this discussion: Implementing a dynamic min-height on a div using JavaScript but with a slight twist. I am working on a dropdown menu within a WordPress site, integrated with RoyalSlider. The height of the slider div adjust ...

javascriptjquerycsswordpress

Preventing default CSS styles in ASP.NET: A step-by-step guide

When working with multiple CSS files for different themes, I noticed that the Login Page is calling one extra CSS file. However, during runtime, some classes from the default CSS are still being used. How can I resolve this issue? ...

asp.netcss

Tips for defining boundaries for position absolute elements using JavaScript

Fiddle. I am in the process of developing a chat/mail application with a resizable menu similar to the Google Hangouts desktop app. When resizing the brown content pane at a normal speed, you can observe that the boundaries are functioning as intended. My ...

javascripthtmlcssresize

Design the parent element according to the child elements

I'm currently working on a timeline project and I am facing an issue with combining different border styles for specific event times. The main challenge is to have a solid border for most of the timeline events, except for a few instances that share a ...

javascriptjqueryhtmlcsstimeline

Ways to center items in a row-oriented collection

When dealing with a horizontal list, the issue arises when the first element is larger than the others. This can lead to a layout that looks like this. Is there a way to vertically align the other elements without changing their size? I am aware of manual ...

htmlcss

The process of obtaining HTML input using JavaScript

I have included the following code snippet in my HTML form: <input type="text" name="cars[]" required>' It is worth noting that I am utilizing "cars[]" as the name attribute. This allows me to incorporate multiple ...

javascripthtml

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

I have set my navigation to dock at a specific document height on the top of the viewport, and when it docks, it should display a dropdown animation. $(document).scroll(function(){ var x = $(window).scrollTop(); if(x>=700){ $("header ...

javascriptjqueryhtmlcss

What are the benefits of keeping JavaScript and HTML separate in web development?

Recently, I came across the concept of Unobtrusive JavaScript while researching best practices in the realm of JavaScript. One particular point that grabbed my attention was the idea of separating functionality (the "behavior layer") from a web page's ...

javascripthtmlangularjs

Steps to turn off Bootstrap's fixed navigation on mobile devices

When a user visits the mobile version of the website or scales the webpage, the Bootstrap navbar will no longer remain fixed at the top. I am looking to set it as a normally scrolling view in the navbar. The Bootstrap class is "navbar-fixed-top" Click he ...

htmlcsstwitter-bootstrap

Retrieve a result following an AJAX post request to utilize the obtained value in subsequent code functionalities

Below is the code snippet where an "if" statement is used to check if a query has been executed correctly. If it has, a part of the script is stored in a variable called $output. This variable is then immediately read by the notification script included in ...

javascriptphpjqueryhtmlajax

An issue has been identified where a single image is not displaying properly on Android devices, as well as IE7 and

Hey there! I recently created a Wordpress site and it seems that the Art Below logo isn't appearing in IE7, IE8, and Android for some reason. Would anyone be willing to help troubleshoot this issue? If you have fresh eyes, please take a look at the f ...

htmlcsswordpress

Outputting a variable using javascript

My challenge is to efficiently print the contract variable, which contains HTML content fetched from the server. How can I achieve this easily? I want the print window in Chrome to display the document with the contents of my variable when I click a button ...

javascriptjqueryhtmliframeprinting

What could be causing the lack of functionality in my nested CSS transition?

My markup includes two classes, fade-item and fade. The fade class is nested within the fade-item class as shown below: <a class="product-item fade-item" (mousemove)="hoverOn(i)" (mouseleave)="hoverOff(i) > <div class= ...

htmlcsssass

View the text notes information stored in a database, make changes to them, and then update and save the modified data using NodeJs

Currently developing a website that allows users to register, login, write text notes in a text area, save them in a database, and view those saved notes on a separate page. Additionally, users should be able to click on a note from the list and have it ...

htmlmysqlnode.jsexpress

What is the best way to modify the selection text background with CSS?

Does anyone know the method for modifying the selection text background in CSS? Many modern websites opt for a personalized background color instead of the traditional blue? ...

htmlcss

Tips for organizing dynamic table data following an append operation

Hey there! I'm currently working on a project involving sorting students after applying filters. Once the students have been filtered, I need to append classes and text to buttons as shown in the image below: https://i.stack.imgur.com/c9Mtm.png The HT ...

javascriptphpjqueryhtmltablesorter