I need my list items to be arranged in 2 rows like the following:
item 1 item 3 item 5 item 7 item 9 ....
item 2 item 4 item 6 item 8 ......
My CSS skills are not great, so I am struggling to find a solution for this. I have attempted different methods using even and odd items, but I cannot determine how to position even items below odd items.
To achieve the desired ordering, you can utilize the power of flexbox. The level of support for flexbox is quite good (http://caniuse.com/#feat=flexbox), but it's important to incorporate fallbacks for older versions of Internet Explorer.
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
list-style-type: none;
margin: 0;
padding: 0;
width:200px;
}
li {
color: #000000;
height: 50px;
margin: 0;
padding: 0;
width: 100px;
}<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>If you want to target only the odd elements in a list, you can utilize the :nth-child selector.
Check out this demonstration:
CSS Example
ul {
position: relative;
white-space: nowrap;
}
li {
display: inline-block;
list-style-type: none;
padding: 0px 5px;
}
li:nth-child(2n) {
top: 100%;
position: absolute;
margin-left: -36px; /* Adjust according to the first element's width */
}
Can the scroll bar be positioned at the top of a table instead of just the bottom? <div style="overflow-x: auto;"> <table> ... ... </table> </div> I am looking for a way to have the scroll bar appear at the top of my t ...
I decided to incorporate the asynchronous select feature found in the documentation for my project. This feature allows me to easily remove a selected value by clicking on 'X'. Below is a snippet of the general component that I use across variou ...
I am experiencing a strange issue with my code - ng-show works perfectly fine on Firefox, but not on IE 11. <div ng-show="isExist" class="panel panel-default"> Here is the relevant code snippet from the controller: $scope.isExist = false; if(user ...
I am currently working on a project that involves using AJAX to load various pieces of HTML code. This is done in order to properly position dynamic buttons within each portion of the HTML content. In my case, I need to trigger click events on the document ...
Hey there, I am currently working on an angular tickbox where I want to be able to tick multiple values. However, I am facing an issue where only the latest checkbox value is displayed instead of both English and German together. How can I populate data fr ...
I am trying to bind a model with a tag that has contenteditable=true However, it seems like ngModel only functions with input, textarea or select elements: https://docs.angularjs.org/api/ng/directive/ngModel This is why the following code does not work ...
I have a modal that includes a table. The modal is loaded from a looped table, and despite my confident code, the display seems off. When I run the code, this odd result occurs. Click the link to view the image. <tbody> <?php ...
Today I discovered the Holy Grail of Layouts while coding, but when I implemented it, the output in browsers was not as expected. The borders were incomplete and strange: Here is the code snippet that caused the issue: #container { border: 10px soli ...
For a project, I need to gather contact data from the client, and then populate a MySQL database with the information to create new rows in a table. There's an additional requirement where I have to calculate the total weight of element pieces multip ...
Although I enjoy using JQuery Mobile, I'm facing compatibility issues with my custom Javascript on the page. Despite everything functioning correctly without JQuery Mobile, adding the library causes problems that I've been unable to resolve. Ess ...
I am trying to implement a widget in JQuery colorbox that allows users to load files. My approach involves using an input tag with type='file' and styling it with visibility:hidden. Additionally, I have created two labels that are styled like but ...
Looking for a way to incorporate plain text within a Vue component template area? The current method involves wrapping the text in a div, but this causes layout issues when concatenating components with other text fragments. This results in awkward spacing ...
Recently, I've been grappling with a task involving storing a div name in a variable for easier editing and incorporating it into standard actions like show/hide. My code functions perfectly without the variables, but introducing them causes the div ...
After successfully exporting my chart created in canvas as an image file, I noticed that the image turned out to be transparent without any background. Is there a way through code to add a background color to this existing image obtained from canvas? For ...
After creating a list where clicking an item triggers a popup, issues arose when testing on small mobile screens. Many users found themselves accidentally tapping buttons in the popup while trying to view it. What is the most effective way to temporarily ...
<tr *ngFor = "let item of list; let i = index;"> An issue arises with the code above: The error message reads: Type 'number' is not assignable to type 'string'. td [ngModelGroup]="j" #temp="ngModelGroup ...
Struggling to incorporate Awesome icons into my Laravel/Vue project, the icon refuses to display correctly no matter what I try. As a last resort, I attempted the most basic approach with Awesome: a straightforward HTML page using a CDN. Here is the code: ...
I am currently working on jQuery and facing an issue with input fields that have assigned ID's and attached .blur() events. I am struggling to identify the specific item that has gained focus: $("#"+field).blur(function() { console.log ($(this).attr ...
I'm currently working on developing an app that will utilize an iframe. The goal is to have controllers in place to adjust the style of the iframe and add text to it, essentially creating a preview function. I've been attempting to use Javascript ...
I'm trying to implement responsive CSS animation delay to create an accordion effect when a user clicks on an arrow associated with a table, all without using JavaScript and only utilizing HTML/CSS. Check out the mobile view in action here: https://w ...