Stop the padding of list items from wrapping when displayed in a horizontal list

Question

Stop the padding of list items from wrapping when displayed in a horizontal list

My goal is to create a horizontal unordered list (<ul>) with four columns in each row.
The number of list items (<li>) may vary and change during runtime.

Existing Code and Outcome

ul {
  -webkit-columns: 4; /* Chrome, Safari, Opera */
  -moz-columns: 4; /* Firefox */
  columns: 4;
  display: block;
}

ul li {
  margin: 20px ;
  padding: 10px;
  text-align: center;
  color: white;
  display: list-item;
}

But the current setup produces this result: https://i.sstatic.net/0TWQU.png

The list appears somewhat horizontally, yet the second element (Green) is positioned below the first one (Blue) and beside it. However, for my purpose, the order of elements doesn't really matter.

The issue lies in the fact that the padding of the element extends into the next column.

Any recommendations on how to address this?

View JSfiddle link here

html css

Answer 1

Answer №1

Check out the code snippet below for a solution: Demo

<ul id = "list">
 <li style="background-color: rgb(51, 70, 115);">1</li>
 <li style="background-color: rgb(156, 78, 129);">2</li>
 <li style="background-color: rgb(121, 159, 59);">3</li>
 <li style="background-color: rgb(51, 70, 115);">4</li>    
 <li style="background-color: rgb(51, 70, 115);">5</li>
 <li style="background-color: rgb(121, 159, 59);">6</li>
 <li style="background-color: rgb(156, 78, 129);">7</li>
 <li style="background-color: rgb(156, 78, 129);">8</li>
</ul>

 #list {
    -webkit-column-count: 4;
       -moz-column-count: 4;
            column-count: 4; /*3 is just placeholder -- can be anything*/
}
#list li {
    display: inline-block;
    margin-bottom: 20px;  
        padding:10px 80px;
}

Answer 2

Check out the code snippet below for a solution: Demo

<ul id = "list">
 <li style="background-color: rgb(51, 70, 115);">1</li>
 <li style="background-color: rgb(156, 78, 129);">2</li>
 <li style="background-color: rgb(121, 159, 59);">3</li>
 <li style="background-color: rgb(51, 70, 115);">4</li>    
 <li style="background-color: rgb(51, 70, 115);">5</li>
 <li style="background-color: rgb(121, 159, 59);">6</li>
 <li style="background-color: rgb(156, 78, 129);">7</li>
 <li style="background-color: rgb(156, 78, 129);">8</li>
</ul>

 #list {
    -webkit-column-count: 4;
       -moz-column-count: 4;
            column-count: 4; /*3 is just placeholder -- can be anything*/
}
#list li {
    display: inline-block;
    margin-bottom: 20px;  
        padding:10px 80px;
}

Answer 3

Answer №2

To achieve this effect, you can utilize the break-inside property in your CSS.

    ul {
     -webkit-columns: 4;
     /* Chrome, Safari, Opera */
     -moz-columns: 4;
     /* Firefox */
     columns: 4;
     display: block;
     list-style: none;
      

   }
   
  ul li {
     margin: 20px;
     padding: 10px;
     text-align: center;
     color: white;
     min-height: 50px;
     display: list-element;
     -webkit-column-break-inside:avoid; 
     -moz-column-break-inside:avoid; 
     -o-column-break-inside:avoid; 
     -ms-column-break-inside:avoid; 
      column-break-inside:avoid;
   }

<ul>
  <li style="background-color: rgb(51, 70, 115);">1</li>
  <li style="background-color: rgb(121, 159, 59);">2</li>
  <li style="background-color: rgb(133, 50, 104);">3</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
</ul>

Answer 4

To achieve this effect, you can utilize the break-inside property in your CSS.

    ul {
     -webkit-columns: 4;
     /* Chrome, Safari, Opera */
     -moz-columns: 4;
     /* Firefox */
     columns: 4;
     display: block;
     list-style: none;
      

   }
   
  ul li {
     margin: 20px;
     padding: 10px;
     text-align: center;
     color: white;
     min-height: 50px;
     display: list-element;
     -webkit-column-break-inside:avoid; 
     -moz-column-break-inside:avoid; 
     -o-column-break-inside:avoid; 
     -ms-column-break-inside:avoid; 
      column-break-inside:avoid;
   }

<ul>
  <li style="background-color: rgb(51, 70, 115);">1</li>
  <li style="background-color: rgb(121, 159, 59);">2</li>
  <li style="background-color: rgb(133, 50, 104);">3</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
</ul>

Answer 5

Answer №3

Here's another way to approach the problem using JavaScript and Flexbox. First, group every 4 li elements within a wrapper element, then utilize Flexbox to create a layout with 4 columns.

$('ul').each(function(){
    var divs = $('li', this);
    console.log(divs)
    console.log(divs.slice(0,4));
    for(var i = 0; i < divs.length; i+=4) {
        console.log(i)
        divs.slice(i, i+4).wrapAll('<li class="wrapper"><ul></ul></li>');
    }
});

ul {
  padding: 0;
  margin: 0;
}
   
.wrapper ul {
  display: flex;
  flex-direction: row;
}

.wrapper ul li  {
  flex: 1;
  margin: 10px;
  padding: 10px;
  color: white;
  min-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li style="background-color: rgb(51, 70, 115);">1</li>
  <li style="background-color: rgb(121, 159, 59);">2</li>
  <li style="background-color: rgb(133, 50, 104);">3</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
  <li style="background-color: rgb(51, 70, 115);">1</li>
  <li style="background-color: rgb(121, 159, 59);">2</li>
  <li style="background-color: rgb(133, 50, 104);">3</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
</ul>

Answer 6

Here's another way to approach the problem using JavaScript and Flexbox. First, group every 4 li elements within a wrapper element, then utilize Flexbox to create a layout with 4 columns.

$('ul').each(function(){
    var divs = $('li', this);
    console.log(divs)
    console.log(divs.slice(0,4));
    for(var i = 0; i < divs.length; i+=4) {
        console.log(i)
        divs.slice(i, i+4).wrapAll('<li class="wrapper"><ul></ul></li>');
    }
});

ul {
  padding: 0;
  margin: 0;
}
   
.wrapper ul {
  display: flex;
  flex-direction: row;
}

.wrapper ul li  {
  flex: 1;
  margin: 10px;
  padding: 10px;
  color: white;
  min-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li style="background-color: rgb(51, 70, 115);">1</li>
  <li style="background-color: rgb(121, 159, 59);">2</li>
  <li style="background-color: rgb(133, 50, 104);">3</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
  <li style="background-color: rgb(51, 70, 115);">1</li>
  <li style="background-color: rgb(121, 159, 59);">2</li>
  <li style="background-color: rgb(133, 50, 104);">3</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
</ul>

Answer 7

Answer №4

By incorporating the min-height property into the styling of the <li> element, you may find a resolution to your issue:

ul li
{
      margin: 20px ;
      padding: 10px;
      text-align: center;
      color: white;
      min-height:20px;
}

Answer 8

By incorporating the min-height property into the styling of the <li> element, you may find a resolution to your issue:

ul li
{
      margin: 20px ;
      padding: 10px;
      text-align: center;
      color: white;
      min-height:20px;
}

Stop the padding of list items from wrapping when displayed in a horizontal list

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide on using bootstrap collapse feature with two buttons sharing the same data-target, ensuring that the collapsible element does not collapse if it is already

The variable "input" was intended to hold the value entered into the input field, however, it is currently storing

Eliminating the standard borders on a pop-up window

Adding input fields that change dynamically along with their corresponding radio buttons using AngularJS

Incorporated new code into the website, functioning properly, although it appears to keep scrolling endlessly below the footer

Preventing click events with pointer-events property in CSS while still allowing scrolling

Steps for adding hover color to a div with linear gradient border

SwipeJS experiencing technical difficulties

A mobile phone screen cannot be fully filled by an image

When extracting a value from an HTML textarea that contains multiple lines of text inputted by the user, the JSON becomes invalid

Does the file extension hold significance in relation to a MIME type? Are there other implications for a server?

How can I restrict input to only numbers and one decimal point using JavaScript?

Repeated information displayed in modal pop-ups

Cannot see the toggler button in Bootstrap 4 Navbar

Guide on adjusting padding for jQuery Flot graph for improved styling

Add the attribute's value to an array

Enable the expansion of a div by dragging and dropping an image onto it

Creating visually appealing tables in React.js

modify the inherent CSS property

Issue with Fancybox Buttons not appearing on parent page upon opening