Is it possible to create multiple justified columns with a fixed number of columns for each list item using HTML/CSS? For example:
- John 41 Singer
- Ringo 45 Drummer
Could this layout be achieved by defining an "li" class in CSS specifically for list items?
The best approach is to represent this data in a table format using proper HTML markup. However, if you prefer not to use tables, the following solution should work just fine. Adjust the container width for a wider layout.
Here is a link to the pen: https://codepen.io/joshuakelly/pen/dwBzdR
This is how the HTML structure should look:
<div class="wrapper">
<div class="row">
<div>John</div>
<div>41</div>
<div>Singer</div>
</div>
<div class="row">
<div>Ringo</div>
<div>45</div>
<div>Drummer</div>
</div>
</div>
<ul class="wrapper list">
<li class="row">
<div>John</div>
<div>41</div>
<div>Singer</div>
</li>
<li class="row">
<div>Ringo</div>
<div>45</div>
<div>Drummer</div>
</li>
</ul>
Here is the CSS code:
.wrapper {
display: flex;
flex-direction: column;
margin-bottom: 1em;
width: 300px
}
.wrapper.list {
list-style-type: none;
margin: 0;
padding: 0;
}
.row {
align-items: center;
display: flex;
justify-content: space-between;
}
.row div {
width: 33.33%
}
Why not utilize a table...
<table>
<th>
<td>Name</td>
<td>Age</td>
<td>other details</td>
</th>
<tr>
<td>John</td>
<td>45</td>
<td>maybe</td>
</tr>
</table>
Afterwards, utilize css to specify the fixed width for the table and columns..
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th, td {
border: 1px solid black;
width: 100px;
}
If necessary, you can also enclose the table within a list like
<ul><li><table>....</table></li></ul>This table has been transformed to mimic the appearance of a list, inspired by HermesTrismegistus.
ul.table-style {
display: table;
border: 1px solid black;
}
ul.table-style li:before {
display: list-item;
content: "";
}
ul.table-style li {
display: table-row;
}
ul.table-style span {
display: table-cell;
border: 1px solid black;
width: 100px;
}<ul class="table-style">
<li>
<span>Name</span>
<span>Age</span>
<span>whateverelse</span>
</li>
<li>
<span>John</span>
<span>45</span>
<span>i gues</span>
</li>
</ul>I seem to be facing a JavaScript challenge. On the desktop version of my website, I've managed to create a functionality where hovering over a button reveals some text, and clicking anywhere else on the site hides the text. However, I'm now stru ...
Utilizing jCrop to establish a crop region for a video element. My goal is to make the video section within the crop area fill a container with identical proportions, but I'm encountering challenges with the mathematical calculations. The sizes of th ...
Looking to create a stylish aqua-themed button that works seamlessly across different browsers. I'm new to CSS, so any guidance is appreciated. I found an online example that looks great in Chrome but fails to display properly in IE... Check out the ...
I am trying to retrieve data from my table that includes two columns: Judul, Isi. <head><link type="text/css" rel="stylesheet" href="addnewpage.css"/</head> <body> <?php $k = mysqli_connect("local ...
Having Trouble Accessing Spring REST Service My spring service @RequestMapping(value = "/MAS/authenticate", method = RequestMethod.POST) public ResponseEntity<Map<String, String>> authenticate(@RequestBody Subject subject) { Map<String ...
If you're looking to add animation to a gif upon mouseover, the Freezeframe plugin created by Chris Antonellis is the perfect solution. Simply use the command below: < img src="image.gif" freezeframe /> For a live example, visit his website he ...
Objective: Ensure that the radio buttons are mandatory. Challenge: The element mat-error and its content are being displayed immediately, even before the form is submitted. It should only show up when the user tries to submit the form. I attempted to use ...
In the process of creating a Django web application, I am exploring methods to determine if a particular application is installed on the user's local machine. One idea I have considered is checking for the existence of a specific folder, such as C:&bs ...
I recently converted my static HTML site to WordPress, but I'm facing an issue where the site is always aligned to the left. Despite trying different solutions like the one below: body{ margin: auto; } The original HTML page was centered perfectly ...
Attempting to create a button in the bottom right corner that will reveal a form when clicked or hovered over. The form should slide open slowly and close after clicking on login, but currently the button is moving down as the form opens. The button also ...
Recently, I integrated Bootstrap 3 into my website and encountered an issue. After selecting the Contact button and closing the popup window, it remains highlighted which is not desirable. https://i.sstatic.net/pzfKy.png I want to modify my CSS file so t ...
My webpage features a select option menu generated by PHP, offering the choices 'Unverified', 'Verified', and 'Banned'. I am working on automatically changing the background color of the statusField based on the pre-selected ...
Currently, I am in the process of creating a website for a client who has requested that I integrate an order calculator onto every page as a pop-up div element. Initially, I implemented an iFrame solution to load the page within its own box but ran into s ...
After a user uploads a sound, it is displayed in a database table as a link. The link needs to contain the class "sm2_button". Unfortunately, when trying to implement this within a PHP file, a syntax error occurs. echo "<td><a href='http://w ...
If faced with the following scenario, how would you handle it? Imagine this: You need to hide a visible element when a specific media query is met: .myElement { display: block; } and the media query to hide it: @media (min-width: 1000px) { .myElement ...
Observing the minimal spacing between the divs AboutDogs and AboutCats, I decided to apply padding-top: 20px to the AboutCats to create a visual distinction. However, I encountered a scenario where only AboutCats exists without any other div above it. In ...
I am currently working on customizing my app using an Angular Material Tab. My goal is to have 6 centered buttons inside the tab, but I'm encountering issues as they are not aligning properly and end up appearing horizontally. Image - View of my tab ...
After following all the steps in my accordion lesson, I encountered an issue where my button refuses to collapse when clicked. Can anyone provide guidance on how to solve this problem? Adding a class of "show" allows the content to display, but it still d ...
I recently designed a responsive webpage with two distinct sections. In order to ensure all elements in the right section were responsive, I utilized the following CSS code: #rightSection * {max-width:100%; height:auto;} Despite this, I noticed that any ...
I'm currently working on a tabbed module that consists of three tabs. Here's how it operates: When the user clicks on a carousel_element, it reveals carousel_hidden-text within that div and displays it in another div called carousel_quote. I&ap ...