Distinct headings break up two-columned lists

Question

Distinct headings break up two-columned lists

Is there a way to ensure that the h2 header always stays with its list items, even if the number of list items varies? Currently, the header appears in one column and the lists appear in another column, causing them to be separated when the list count changes. See my code below:

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}

<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12">
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      ...
    </ul>
  </div>
</div>

I've tried using divs instead of parent lis, but it creates uneven vertical gaps due to varying child ul sizes. Is there a dynamic workaround to ensure that the header always stays connected to its sibling ul no matter how many list items it contains?

html css html-lists

Answer 1

Answer №1

To prevent li elements from breaking into 2 columns, you can reset the display property to inline-block.

See the demo below:

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

li {/*to avoid li elements from spreading across 2 columns*/
  display: inline-block;
  width: 100%
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}

<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12>
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <!-- More list items here -->
    </ul>
  </div>
</div>

If you want to push the items into the first column as much as possible, you can add a margin to the last element. Keep in mind that this method works best for static and balanced content sizes. See the example below:

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

li {
  /*to avoid li elements from spreading across 2 columns*/
  display: inline-block;
  width: 100%
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}


/* Average pusher */
/* Only for demonstration purposes, not recommended for dynamic content */

ul.list-parent :last-child {
  padding-bottom: 20%; /* or set a static value */
}

<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12">
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <!-- Additional list items -->
    </ul>
  </div>
</div>

Answer 2

To prevent li elements from breaking into 2 columns, you can reset the display property to inline-block.

See the demo below:

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

li {/*to avoid li elements from spreading across 2 columns*/
  display: inline-block;
  width: 100%
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}

<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12>
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <!-- More list items here -->
    </ul>
  </div>
</div>

If you want to push the items into the first column as much as possible, you can add a margin to the last element. Keep in mind that this method works best for static and balanced content sizes. See the example below:

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

li {
  /*to avoid li elements from spreading across 2 columns*/
  display: inline-block;
  width: 100%
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}


/* Average pusher */
/* Only for demonstration purposes, not recommended for dynamic content */

ul.list-parent :last-child {
  padding-bottom: 20%; /* or set a static value */
}

<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12">
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <!-- Additional list items -->
    </ul>
  </div>
</div>

Distinct headings break up two-columned lists

Answer №1

Similar questions

I am struggling to style a form effectively with CSS grid

Iterate through three images using the `background-image` property in my Div

Utilize Bootstrap's custom validation exclusively on fields that are invalid

Refresh a Div using JSON content with Struts2 Jquery Plugin

Steps for Implementing a "Load More" Button on an HTML JSON Page

Overlay displayed on top of a single div element

Is it possible to generate distance between 2 elements without utilizing padding or margin?

Issues with Bootstrap-slider.js functionality

Internet Explorer 9 users experience a sudden blank page display

An issue occurred during the building of the module (from ./node_modules/sass-loader/dist/cjs.js) and resulted in

creating custom HTML elements in Rails forms

Stop vuetify from cluttering the global style scope

In Internet Explorer 8, the functionalities of jquery animate() and slideUp() are not functioning properly

Efficient Ways to Utilize Global CSS in an Angular Project Without CLI

Click anywhere outside the sidemenu to close it

Attempting to incorporate Font-Awesome Icons into the navigation bar tabs

How can one HTML form be used to request a unique identifier from the user, retrieve a record from the database, parse it into JSON format, and then populate an HTML page form using the

Getting the Title value from Selenium in Python: A guide

Struggling to send an object through a node route for rendering a page?

The Django framework does not apply color to the Bootstrap Navbar as expected