I'm fairly new to HTML and CSS, so I'm finding it difficult to align all semicolons like in the screenshot provided.
PSD Preview:
This is my current HTML markup
<ul>
<li>Name <span>: John Doe</span></li>
<li>Age <span>: 30.30.30</span></li>
</ul>
Here is the corresponding CSS
li span {
padding-left: 20px;
}
The outcome can be seen in the screenshot below:
What would be the appropriate HTML markup and CSS to achieve this alignment?
Utilize display:table-row to style the li elements and display:table-cell for the label tags.
li {
padding-left: 20px;
display: table-row;
}
li label {
display: table-cell;
}
li label:not(:first-child) {
padding-left: 40px;
}<ul>
<li><label>Name</label><label>: John Doe</label></li>
<li><label>Age</label><label>: 30.30.30</label></li>
</ul><table>
<tr>
<td>First Name </td><td>: </td><td> Jane Doe</td>
</tr>
<tr>
<td>Age </td><td>: </td><td> 25.25.25</td>
</tr>
</table>There are two methods you can use to achieve this task.
The first method involves using a table:
<table>
<tr>
<td>Name</td>
<td>: John</td>
</tr>
</table>
Alternatively, you can also achieve the same result by using ul and li:
<ul>
<li><span>Name </span><span>: John Doe</span></li>
<li><span>Age </span><span>: 30.30.30</span></li>
</ul>
li span:first-child {
width: 200px;
}
Here is a solution that may assist you:
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Name</td>
<td>John Doe</td>
<tr>
<td>Age</td>
<td>30.30.30</td>
</tr>
</table>
</body>
</html>You have the option to utilize a table in this manner:
<tbody class="table" >
<tr>
<td>Product</td>
<td>$50</td>
</tr>
<tr>
<td>Quantity</td>
<td>3</td>
</tr>
<tr>
<td>Total</td>
<td>$150</td>
</tr>
</tbody>
</table>
Furthermore in CSS
.table td{
padding-left: 2em;
}
Expecting that this example proves to be useful.
Here's an alternative solution, just for fun
li {
display: flex;
flex-direction: row;
justify-content: space-between;
}
span {
width: 400px;
text-align: left;
}<ul>
<li><span>Name</span><span>: John Doe</span></li>
<li><span>Another Thing</span><span>: John Woe</span></li>
<li><span>Finally</span><span>: Another last thing</span></li>
</ul>Looking to create analytical graphs of tweets similar to the site found at the following link Website-Link Curious about the top open source options available for this task? I've heard good things about Raphael.js. Any other recommendations? ...
As I delve into a Coursera course on AngularJS, I've encountered a perplexing issue with a controller. The console is indicating that it is not defined. Upon running it through the https://validator.w3.org/, a recurring error message mentioning that ...
As a beginner, I have a question about best practices. Is it more effective to return HTML from a function like the following: function displayHtml($userName) { $htmlMsg = " <html> <head> <title>Displaying HTML</title&g ...
Here is the HTML code I am working with: <dl class="last"> <dt><label class="required">DL TO HIDE</label></dt> <dd class="last"> <div class="input-box"> <select name="options[40]" id ...
I'm currently working on a chat box that displays messages as a list. One issue I'm facing is that when I click on the start chat button, the chat box opens but the length of the list always remains zero. How can I resolve this problem? $(docu ...
Is there a way to automatically select the value in a drop-down list from HTML based on the name and ID I receive? I need this functionality to edit information from the database. I've tried using this code but it's not displaying the correct op ...
Is there a way to implement vertical scrolling in a grid container so that when the height of components exceeds a certain maximum, they can be scrolled through vertically? ...
Imagine having the following structure: <div class="building"> <p>...</p> <div class="room"> <p>...</p> </div> </div> <div class="building"> <p>...</p> <div class="room ba ...
My code below features a page designed using Bootstrap HTML and CSS, but it doesn't look right on all devices. For example, on mobile devices, the grid appears zoomed in and unresponsive. I tried removing grid-template-columns: auto auto;, which fixed ...
I am currently attempting to utilize plotly express to generate a string representation of a div object in HTML for integration with other packages. Although I have been following the documentation (Plotly v5.17.0), it seems that my attempts have not been ...
Can anyone help me with my addon-sdk plugin development issue? I am currently working on a project that involves a togglebutton and panel. The panel loads an HTML file named "myform.html" where users can fill out a form and submit it. Upon submission, an a ...
I possess the following: <input type="radio" :name="activity" v-model="activity" :value="1" v-on:change="callProc(data, data2)" required> Ho ...
I am currently developing a pomodoro clock using React. My goal is to have the message text (e.g. "Set a time", "Focus," etc.) and the play/reset button fade out and in when the play/reset button is pressed. So, when the play button is clicked, "Set a time ...
As a newcomer to game development, I am creating web games using JS, HTML, and CSS. However, I have encountered an issue with preventing right-click inspect hacking, which has led to people hacking my games through this method. I am wondering, how can I s ...
A few days back, I came across an article discussing the usage of multiple h1 tags on the same web page. It also mentioned a specific structure that allows for multiple article, header, footer tags, and more. Unfortunately, today I'm struggling to rec ...
Hi everyone, I need some help with my code. Feel free to check it out here Currently, I'm working on implementing multiple circular progress bars that can function dynamically. The goal is to be able to add additional progressCircle_# objects with di ...
After going through all the posts here, I found that some are outdated and others don't quite match my issue. Apologies for bringing it up again. I have a basic HTML table with data in it. My goal is to update this data without refreshing the entire ...
Hi there! I'm new to coding and just started learning HTML and CSS. My question is: How can I change the color of buttons once they are clicked? <div class="icon-bar"> <a href="#"><i class="fa fa-search" ...
I'm currently developing a JavaScript app that involves selecting a random question from an array and combining it with a random object from another array. Here's a glimpse of how my app is structured: Array.prototype.random = function (length) ...
After creating a div with the class container and adding 50px padding to the top, I am now ready to add another container using Bootstrap's CSS. Do I need to create a new class like container-2 to edit the new container's style or are there multi ...