Creating a horizontal line to divide floating list items with CSS

I would like to achieve a design where there is a line between floating items displayed as follows:

..........................................
.                                        .
.    LI LI LI LI LI LI LI LI LI LI LI    .
.    --------------------------------    .
.    LI LI LI LI LI LI LI LI LI LI LI    .
.    --------------------------------    .
.    LI LI LI LI LI LI*                  .
.                                        .
..........................................

*Please note that the last list items in the bottom row do not have a border/divider line.

I am working with pure UL/LI elements and would prefer not to add an extra class as it may make the HTML messy and less semantic.

Is there a way to accomplish this using only CSS?

csscss-float

Answer №1

To achieve this effect using only CSS, you can make assumptions about the number of elements per row.

For example, if you had 4 list items per row, you could add a bottom border to each one:

li{
  float:left;
  width:25%;
  border-bottom: 1px solid black;
}

Next, select the last row and remove the border:

li:nth-child(4n+1):nth-last-child(-n+4),
  li:nth-child(4n+1):nth-last-child(-n+4) ~ li {
    border:none;
}

Finally, use media queries to adjust for different platforms. For instance, if you have 3 elements per row, simply replace all instances of '4' with '3'.

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

Creating consistent row spacing between Bootstrap 5 rows that matches the spacing in Bootstrap 4

Is it possible to adjust the site.css file in order to achieve a similar row spacing effect as Bootstrap 5 when working with existing HTML code? ...

cssbootstrap-4rowsbootstrap-5

Display Google Maps and YouTube videos once user consents to cookies

I recently installed a plugin on my WordPress site called Cookie Notice, which I found at this link. So far, I've been impressed with how user-friendly and lightweight it is. Due to the latest GDPR regulations, I now need to figure out a way to hide ...

javascripthtmlcsswordpress

Tips for adjusting a table's height to fit within its container

After extensive research and testing various solutions unsuccessfully, I am still facing an issue with my web app layout. Specifically, when I add a table to the content container, it causes the container to resize and shifts the position of the footer. Is ...

cssbootstrap-4

Position a DIV element without specifying the width dimension

Possible Duplicate: How can I center something if I don't know ahead of time what the width is? I am seeking guidance on aligning a div element without prior knowledge of its width. My approach differs from previous inquiries as I am open to usin ...

htmlcsscenter

Is it possible to leverage the flex features of react-native in a manner similar to the row/column system of

Is it a good idea to utilize flex in react native by creating custom components that retrieve flex values? I previously used the bootstrap grid system and now I am exploring react native. Is there a way to implement this example using react-native bootstr ...

javascriptcssreactjsreact-nativeflexbox

Issue with excessive content causing scrolling difficulty

I've created CSS for a modal dialog, but I'm facing an issue. When the content exceeds the vertical space of the wrapper, the scrolling functionality doesn't work correctly. Although I can scroll, it's limited and I can't reach th ...

htmlcss

Tips for creating seamless image transitions using a toggle button

My transition effect is working smoothly, but I am having trouble setting it up for the image. How can I resolve this issue? I attempted the following: var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySelector("#lights-o ...

javascripthtmlcsscss-transitions

Safari: The onbeforeunload event

Welcome! To experience the Leave | Stay confirmation box on your page, please make sure you are using Safari 10. I am currently facing an issue with getting the confirmation box to display properly across different browsers. To begin, please visit and l ...

javascriptjqueryhtmlcsssafari

Modifying td background color according to values in a PHP array

Trying to update the background color of a td element with the code below. However, it seems that the code needs some adjustment as the color is not being applied. Any assistance or alternative solutions would be greatly appreciated. Snippet of PHP code: ...

javascriptphpjqueryhtmlcss

Tips for creating a striped background color on your Blogger blog's homepage

Currently, I am personalizing the default theme on Blogger called Simple Dark, but I have hit a roadblock when it comes to creating a striped background color for the posts on the homepage. Here is a glimpse of how my blog currently appears, and here is ...

javascripthtmlcssxmlblogger

How come the Google fonts won't display correctly within my HTML document?

After importing some fonts into my CSS file, I noticed that they are not displaying correctly in the design. Below is the code for the imported fonts and CSS linking: https://i.stack.imgur.com/9RQ4u.png The output only shows sans-sarif working properly: ...

htmlcssgoogle-fonts

Achieving a hover effect following the execution of a jQuery animate() function

I'm working on a code snippet to increase the size of an image when hovered over: $(".myImage").hover(function () { $(this).find('img').stop() /* Add class of "hover", then stop animation queue buildup*/ . ...

jquerycssjquery-animatez-index

In Chrome, the latest SVG border-image-source is not functioning properly

For the past 6 months, I successfully used border-image-source to create a custom border on one of my websites. Recently though, I noticed that it no longer appears in Chrome, although it still works in Safari. Here is the code snippet I have been using: ...

cssgoogle-chromesvgborder

Animating the height of a div based on a condition with *ngIf and CSS

I am working with an angular bloc contained within a container that displays based on a *ngIf condition. <div class="simulation-bloc"> <ng-container *ngIf="type==='simulation'"> // bloc content </ng-cont ...

htmlcssangular

Centering the searchbar in the Bootstrap 4 navbar

I'm finding it difficult to center my search bar inside my navigation. I've experimented with different options like mr-auto and ml-auto or mx-auto, but the element just won't budge. I want to avoid using specific pixel values as it may affe ...

htmlcsstwitter-bootstrapbootstrap-4

How can I retrieve the reference number of an item by clicking a button within a list item in an unordered

Presented here is a collection of data points and a button nested within an ul <ul> <li class="mix" category-1="" data-value="600.35" style="display:block;"> <figure> <figcaption> <h3> ...

javascriptjqueryhtmlcss

Newly designed Bootstrap 4 input field with search feature positioned off-center on smaller screens

I have successfully positioned an input text next to a button as shown below: While it displays perfectly on a regular computer screen, the alignment gets skewed when viewed on a phone device: This is the functional code I am using: <!-- Add Filer Fo ...

cssbootstrap-4

What is the method for rotating a map using JavaScript?

My map built with Leaflet displays a route and a moving car marker. Now, I am looking to implement a feature where the map rotates based on the direction of the car. I have access to both the current coordinates of the car and the target coordinates. ...

javascriptjquerycssleaflet

Fixed Header Stays in Place as Main Content Scrolls Over

I've hit a roadblock with what seems like a straightforward issue. On a page, I have two divs: <div id="header">...</div> <div id="content">...<div> The header needs to be fixed at the top of the page, while the main content ...

cssheaderscrollpositioninghtml

Prevent text from wrapping when using jQuery to animate font size

I have a unique way of showcasing content in a preview format by utilizing em units for scaling and adjusting the root font size to increase or decrease. When users click on the preview, the full content is revealed with an animation that scales the font s ...

javascriptjqueryhtmlcss