Elements positioned next to each other with no margin when spread across multiple lines

I have a color picker with a right margin of 6px.
https://i.sstatic.net/OHqQK.png
I need the white square (with the black check marker) to not have a right margin so it doesn't wrap to the next line and can use the full width.
Instead of applying a class with margin set to 0, I want an automatic detection method because, depending on user selections or device size, different elements might be affected.
A CSS solution is preferred, but using Javascript/jQuery would also work fine.
The elements are list items styled with float left.

ul.colors li, ul.colors li.chosen {
    margin: 0 !important;
    padding: 3px 6px 3px 0 !important;
}
ul.colors li .colorbox {
    height: 18px;
    width: 18px;
    border: 1px solid #dbdbd1;
}

ul.colors, ul.colors li {
    float: left;
    list-style: none
}

ul.colors { width: 180px; background: #ccc; padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="ajax-layered"><ul class="colors show-count"><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=736" data-count="34" data-link="/?filter_kleur-filter=736"><div class="colorbox f_blauw" style="background:#0000ff;" alt="Blauw" title="Blauw"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,729" data-count="12" data-link="/?filter_kleur-filter=726,736,729"><div class="colorbox f_geel" style="background:#ffff00;" alt="Geel" title="Geel"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,752" data-count="6" data-link="/?filter_kleur-filter=726,736,752"><div class="colorbox f_grijs" style="background:#808080;" alt="Grijs" title="Grijs"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,730" data-count="19" data-link="/?filter_kleur-filter=726,736,730"><div class="colorbox f_groen" style="background:#008000;" alt="Groen" title="Groen"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,734" data-count="6" data-link="/?filter_kleur-filter=726,736,734"><div class="colorbox f_oranje" style="background:#ffa600;" alt="Oranje" title="Oranje"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,735" data-count="24" data-link="/?filter_kleur-filter=726,736,735"><div class="colorbox f_rood" style="background:#ff0000;" alt="Rood" title="Rood"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,823" data-count="2" data-link="/?filter_kleur-filter=726,736,823"><div class="colorbox f_roze" style="background:#ff69b4;" alt="Roze" title="Roze"></div></a></li><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=726" data-count="34" data-link="/?filter_kleur-filter=726"><div class="colorbox f_wit" style="background:#ffffff;" alt="Wit" title="Wit"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,738" data-count="21" data-link="/?filter_kleur-filter=726,736,738"><div class="colorbox f_zwart" style="background:#000000;" alt="Zwart" title="Zwart"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,831" data-count="3" data-link="/?filter_kleur-filter=726,736,831"><div class="colorbox f_transparant" style="background:#efefff;" alt="Transparant" title="Transparant"></div></a></li></ul></div>

javascriptjqueryhtmlcssmargin

Answer №1

There's an ingenious solution for situations like this. No need for javascript and it seamlessly adapts to any number of icon rows.

ul.colors li, ul.colors li.chosen {
    margin: 0 !important;
    padding: 3px 6px 3px 0 !important;
}
ul.colors li .colorbox {
    height: 18px;
    width: 18px;
    border: 1px solid #dbdbd1;
}

ul.colors, ul.colors li {
    float: left;
    list-style: none
}

ul.colors { width: 182px; background: #ccc; padding: 0; margin: 0; }
div.ajax-layered { width: 176px; overflow: hidden; background: #ccc; padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="ajax-layered"><ul class="colors show-count"><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=736" data-count="34" data-link="/?filter_kleur-filter=736"><div class="colorbox f_blauw" style="background:#0000ff;" alt="Blauw" title="Blauw"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,729" data-count="12" data-link="/?filter_kleur-filter=726,736,729"><div class="colorbox f_geel" style="background:#ffff00;" alt="Geel" title="Geel"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,752" data-count="6" data-link="/?filter_kleur-filter=726,736,752"><div class="colorbox f_grijs" style="background:#808080;" alt="Grijs" title="Grijs"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,730" data-count="19" data-link="/?filter_kleur-filter=726,736,730"><div class="colorbox f_groen" style="background:#008000;" alt="Groen" title="Groen"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,734" data-count="6" data-link="/?filter_kleur-filter=726,736,734"><div class="colorbox f_oranje" style="background:#ffa600;" alt="Oranje" title="Oranje"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,735" data-count="24" data-link="/?filter_kleur-filter=726,736,735"><div class="colorbox f_rood" style="background:#ff0000;" alt="Rood" title="Rood"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,823" data-count="2" data-link="/?filter_kleur-filter=726,736,823"><div class="colorbox f_roze" style="background:#ff69b4;" alt="Roze" title="Roze"></div></a></li><li class="chosen filter-selected"><a href="#" data-filter="/?filter_kleur-filter=726" data-count="34" data-link="/?filter_kleur-filter=726"><div class="colorbox f_wit" style="background:#ffffff;" alt="Wit" title="Wit"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,738" data-count="21" data-link="/?filter_kleur-filter=726,736,738"><div class="colorbox f_zwart" style="background:#000000;" alt="Zwart" title="Zwart"></div></a></li><li class=""><a href="#" data-filter="/?filter_kleur-filter=726,736,831" data-count="3" data-link="/?filter_kleur-filter=726,736,831"><div class="colorbox f_transparant" style="background:#efefff;" alt="Transparant" title="Transparant"></div></a></li></ul></div>

What you can do is create space for the right margin by adjusting the size of the inner container (in this case the ul) to be slightly larger than the outer container. If needed, percentages can also be utilized. In such cases, you have the option to set dimensions in percentages or utilize calc() to calculate the necessary width (calc(100%+6px)).

EDIT: Implemented the provided script and made necessary modifications. If you find this helpful, please consider leaving feedback on how this answer could be improved. Thank you.

Answer №2

To target a specific child element in a certain pattern, you can use the nth-of-type selector.

child:nth-of-type(8n) { 
  margin-right: 0;
}

With this code, every 8th child will have its right margin removed. This pattern will apply to subsequent lines as well, selecting the 16th, 24th, and so on.

For more information, check out: https://developer.mozilla.org/en/docs/Web/CSS/:nth-child

Answer №3

One possible solution could involve determining the left position for each div element.

let number = +prompt('Enter a number:');
let htmlOutput = '';
for (let i = 0; i < number; i++) {
  htmlOutput += '<div class="loop"></div>';
}
document.body.innerHTML = htmlOutput;
let elements = document.querySelectorAll('.loop');
const MARGIN_VALUE = 10;
[].forEach.call(elements, function(element) {
  if (element.getBoundingClientRect().left == MARGIN_VALUE) {
    element.style.marginLeft = 0;
  }
})
* {
  padding: 0;
  margin: 0;
}
div {
  width: 30px;
  height: 30px;
  background: green;
  margin: 0 0 10px 10px;
  float: left;
}

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

Tips for implementing the same autocomplete feature across multiple form fields

Struggling to add multiple products and provide auto-suggest for each product name? You're not alone. It seems like the auto suggest feature is only working for the first product. Can anyone point out what's going wrong here? Here's my HTML ...

javascriptjqueryhtml

Is there a way to update my profile picture without having to constantly refresh the page after uploading it?

Here is the code for my profile page. I am considering using a callback along with another useEffect function, but I'm unsure. Please help me in finding a solution. For now, let's ignore all the code related to deleting, saving, and handling ingr ...

javascripthtmlreactjsnpmreact-hooks

Contrasting the addition of an onClick listener through Jquery versus utilizing an HTML onclick attribute

I found this interesting piece of code that I want to share with you all: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.12.4.js"></script> <title> HelloWorld JQuery </t ...

javascriptjqueryhtmlevent-handling

Concealing the sidebar in React with the help of Ant Design

I want to create a sidebar that can be hidden by clicking an icon in the navigation bar without using classes. Although I may be approaching this incorrectly, I prefer to keep it simple. The error message I encountered is: (property) collapsed: boolean ...

javascriptreactjstypescriptweb-applicationsantd

Access all areas with unlimited password possibilities on our sign-in page

I have set up a xamp-based web server and installed an attendance system. I have 10 users registered to log in individually and enter their attendance. However, the issue is that on the login page, any password entered is accepted without showing an error ...

javascriptphphtml

Error: Certain Prisma model mappings are not being generated

In my schema.prisma file, I have noticed that some models are not generating their @@map for use in the client. model ContentFilter { id Int @id @default(autoincrement()) blurriness Float? @default(0.3) adult ...

javascriptnode.jstypescriptgraphqlprisma

Style your index with a Wordpress plugin

I've been attempting to modify a plugin's stylesheet, but I'm having trouble locating the CSS file that contains the necessary styles. Despite Chrome's developer tool indicating that it is styled directly on the index site, I have searc ...

phpcsswordpresspluginsstyles

Guide to implementing endless ajax scroll pagination using Codeiginiter

I am attempting to implement infinite ajax scroll pagination on my blog, but unfortunately I am encountering an issue. The error message "server not responding..." keeps appearing despite troubleshooting efforts. Below is the code snippet being utilized: ...

jqueryajaxcodeigniterpagination

My bootstrap collapse navbar isn't functioning properly. Despite pressing the icon on a smaller screen, the menu fails to open. Can anyone provide a solution to this issue?

The hamburger menu is not working properly. I am facing an issue where the navigation does not appear when I press on the hamburger icon on a small screen. Can someone please guide me on how to resolve this problem? :/ <nav class="navbar bg-d ...

javascripthtmljqueryjsonbootstrap-5

Discover the proper technique to display an error message in cases where no data is detected during the filtering process

I'm currently working on a component that involves search filtering and dropdown filtering. The filtering functionality is working fine, but I'm struggling to determine where to display an error message if no data is found during the filtering pr ...

javascriptreactjstypescripterror-handlingfiltering

Is there a way to transfer a JavaScript variable created by an API to a PHP variable within a form submission?

I have some variables that are being generated by a JavaScript script and I am looking for the most effective way to pass them back to the PHP program that initiated the script. Since there are several variables (4-5), I prefer not to pass them through the ...

javascriptphpajaxforms

Guide to implementing Vuetify tabs alongside Vue Router

I have a scenario with two Vuetify tabs in this jsfiddle, but the documentation lacks examples of using vue-router with them. After stumbling upon a helpful Medium.com post about integrating Vuetify with vue-router, I came across the following code: <d ...

javascriptvue.jsvuejs2vuetify.js

Modify the properties of an element based on another

Situation : I am facing a challenge where I need to adjust two components based on a click event. The function linked to the onclick event handleChange includes a prop 'text'. Each time the onclick event is triggered, I must modify the value of t ...

javascriptreactjsmaterial-uirenderconditional-operator

Is it possible to create two header columns for the same column within a Material UI table design?

In my Material UI table, I am looking to create a unique header setup. The last column's header will actually share the same space as the previous one. Picture it like this: there are 4 headers displayed at the top, but only 3 distinct columns undern ...

javascriptcssreactjsmaterial-ui

Ways to update the icon on a jQuery button

I am currently trying to modify a button on my website that looks like this: <button type="submit" class="btn blue pull-right" id="RequestNewPwd"> Submit <i class="m-icon-swapright m-icon-white"></i> </butto ...

javascriptjqueryhtml

Uploading multiple files from a Node.js client to a Node.js server

Hey there, I have a node server set up with multer to handle multiple file uploads. const multer = require('multer'); const app = express(); const upload = multer({dest:'uploads/'}); const SERVER_PORT = 8080; app.listen(SERVER_PORT, ...

javascriptnode.jsaxios

display the inner div adjacent to the outer div

I am trying to create a vertical menu with submenus, and I need the submenu to appear next to its parent div. Has anyone encountered this issue before? I searched on Google but could only find solutions for placing two divs next to each other. I specifica ...

htmlcssmenusubmenudropdown

Verify that all dynamic radio buttons have been selected prior to submitting the form

Ensuring all dynamically generated radio buttons from the database are checked before form submission is a challenge I'm facing in my Booking Project. The scenario involves selecting food packages and subpackages, where clients need to choose their pr ...

javascripthtmllaravelvalidationlaravel-5

Utilizing JavaScript to create a single selection from two Listboxes

Seeking assistance with integrating ASP.NET (C#) code. In my web application, I have implemented two listboxes - one displaying a list of companies fetched from the database (lstCompanies), and the other allows users to filter these companies (lstFilter). ...

c#javascriptasp.netlistbox

Callback for remote validation in asp.net core unobtrusive form validation is essential for ensuring data

My login form consists of 2 fields - email and password. The password field is initially hidden, and I require the email to be validated by a remote validator before showing the password field. [Remote("ValidateAccount", "Account", Err ...

jqueryasp.net-mvcasp.net-coreunobtrusive-validation