The alignment of the list items is not consistent

Can anyone help me with this issue? I need all the list items to align on the left side like in the example image.

Here is an example of what I am looking for

Below is my code:

.feature-stack {
  margin: 100px 0 0 0;
  border: solid 3px;
}

.features ul.features-stack {
  margin-top: 50px;
}

.features ul.features-stack ul {}

.features ul.features-stack li:last-child {
  padding-bottom: 0px;
  border-bottom: none;
}

.feature-content ul li {
  list-style-type: none;
}
<ul class="features-stack">

  <li class="feature-item">
    <div class="feature-content">
      <h5>Polyethene</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

  <li class="feature-item">
    <div class="feature-content">
      <h5>Other virgin plastic</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

  <li class="feature-item">
    <div class="feature-content">
      <h5>Polypropylene</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

</ul>

I want all list items to be aligned and remove the bullet points. If more information is needed, let me know.

Thank you!

htmlcsslist

Answer №1

One simple solution is to include ul {list-style-type:none;}:

ul {
  list-style-type:none;
}

.feature-stack {      
  margin: 100px 0 0 0;
  border: solid 3px;
}

.features ul.features-stack {
  margin-top: 50px;
}

.features ul.features-stack ul {}

.features ul.features-stack li:last-child {
  padding-bottom: 0px;
  border-bottom: none;
}

.feature-content ul li {
  list-style-type: none;
}
<ul class="features-stack">

  <li class="feature-item">
    <div class="feature-content">
      <h5>Polyethene</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

  <li class="feature-item">
    <div class="feature-content">
      <h5>Other virgin plastic</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

  <li class="feature-item">
    <div class="feature-content">
      <h5>Polypropylene</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

</ul>

Answer №2

To customize the styling, just add the following CSS to your stylesheet:

 ul {
    list-style: none;
}

.Heading {
    font-size: 20px;
    font-weight: bold;
}

Then in your HTML, simply replace the heading tags (H5) with list tags (li). Here is how you can do it:

<ul class="features-stack">

                        <li class="feature-item">
                            <div class="feature-content">
                                <li class="Heading">Polyethene</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li> 
                            </div>
                        </li>
                <br/>
                        <li class="feature-item">
                            <div class="feature-content">                                    
                                <li class="Heading">Other virgin plastic</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                            </div>
                        </li>
                   <br/>
                        <li class="feature-item">
                            <div class="feature-content">                                   
                                <li class="Heading">Polypropylene</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                            </div>
                        </li>

                    </ul>

I have personally tested the code above and it is functioning perfectly.

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

What is the best way to center-align my list within the designated area?

I need help centering a two column list on my webpage. It's currently justified to the left. How can I adjust it? To see what I'm working with, check out my jsfiddle: http://jsfiddle.net/huskydawgs/c2yqmfzt/5/ <p> A banana is an edible fr ...

htmlcss

How to Make a Fixed Sidebar with Visual Composer on Your WordPress Site

I'm struggling to create a sticky sidebar on my WordPress site because Visual Composer doesn't allow me to add more IDs and Classes to the divs. I've tried using the Sticky Sidebar plugin from GitHub, which can be found here: The script has ...

javascriptjqueryhtmlcsswordpress

A new version of Primefaces has been released, introducing a sleek button feature with

How can I utilize the Primefaces version 10 button with a Font Awesome icon, resizing the icon without displaying the words ui:button? A and B are tests that I can resize successfully, but they are not buttons. C and D are buttons where the icon is resize ...

cssprimefaces

The dropdown menu displaying the img-dropdown-content with a display set to none is not functioning as anticipated

Attempting to hide drop down menu with img-dropdown-content but it's not working, possibly being overridden by another element - only using html and css I have experimented with visibility: hidden; both with and without !important as well as display: ...

htmlcss

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

I need help designing a button that can alter the layout of my CSS grid. The grid information is contained within a class called 'container'. My goal is to change the grid layout by simply clicking a button, using either HTML and CSS or JavaScri ...

csscss-grid

Display a selection of diverse swf banners within an HTML format

I am looking to display two flash banners (.swf) randomly on page refresh. While I have successfully accomplished this with image files using javascript, I am facing some challenges with flash banners. Here is an example of how I can achieve this with ima ...

javascriptjqueryhtmlrandombanner

"Implementing a bookmark/watch feature with a hover text cloud using either a Drupal module or CSS styling

Seeking guidance on implementing features in Drupal core. Interested in allowing users to subscribe to various aspects of a node, such as bookmarking for later viewing or rating it. Want a consistent theme across the site and for these features to use togg ...

cssdrupalbutton

Comparing background-color using .css() in jQuery/Js

I've been experimenting with creating angled divs on a webpage, where each basic panel is separated by an angled break. The idea is to have the background-image of one div flow smoothly into the background-color of the next div. Since I couldn't ...

javascriptjqueryhtmlcssregex

Ways to display or conceal a moving svg based on the current tab selection

Below is the fiddle and snippet: https://jsfiddle.net/e130kr2x/ I've successfully achieved animating the SVG when a tab is active, but I'm facing difficulty in making it not display or fade out when opening a new tab. The new tab should activate ...

htmlcsssvgtabs

Incorporating nodejs variables and data into an HTML file

As a newcomer to nodejs, I am currently working on a project where I need to connect to elasticsearch using nodejs, fetch and manipulate data from it, and then insert the modified data into an html file. However, I'm struggling with the fact that html ...

htmlnode.jselasticsearch

Encountering a Blank Area at the Top of a Printed AngularJS Screen

Currently, I am tackling an issue in AngularJS while working on the Print Invoice Page. The problem I am encountering is a blank space at the top of the printed screen. Check out the image here Below is my code: HTML <div id="invoice" class="compact ...

javascripthtmlcssangularjs

Apply the active class to a section in the menu

I am exploring how to dynamically add the "active" class to a specific section of my menu based on which link within that section has been clicked. After successfully implementing the active class functionality for individual links using jQuery, I am confi ...

javascriptjqueryhtmlcssmenu

What is the best way to verify the font-family using JavaScript?

To verify if the user has installed the font family, we can run a JavaScript function with AngularJS. I am using a Typekit font and have only loaded this service for users who do not have this specific font. ...

javascriptcssangularjsfonts

retrieve the current page/url using an attribute selector

I've been attempting to format a text menu in my CSS so that the link matches the current URL, but it doesn't appear to be working. Here's the code snippet: #pages.tabs ul li a[href$=location]{color:blue !important;} , where #pages.tabs ul ...

htmlcss

Proper Alignment of Multiple Elements Floating to the Right in a Menu

Although this question has been asked previously, I am facing challenges in getting it to work for my specific scenario. My objective is to showcase a menu bar with a search option and inline text to its left. However, when I attempt to float both elements ...

htmlcsstwitter-bootstrap

Seeking assistance with setting up BxSlider installation

I'm struggling with adding bxslider to my HTML template. No matter what I try, the slider doesn't work as expected. When I preview my website, all three images are displayed together in a single column. Can someone please guide me on how to fix t ...

javascriptjqueryhtmlcss

Unusual arrangement of images (HTML, CSS, Bootstrap)

I recently started my journey with freecodecamp a few days ago. I encountered my first project which required me to create a tribute page for anyone in the world. The page needed to include a picture, some text, and a link to an external site. However, I& ...

htmlcssbootstrap-4

"Clicking on an HTML button triggers a postback action prior to initiating

I am experiencing an issue with my HTML form that is designed to send a "booking" email via AJAX. The form is located within a popup div, and upon submission, I want the form data to be sent to an ashx handler for processing. However, the button on the for ...

jqueryhtmlajax

Is there a way to implement a sub-sub menu in my existing code structure?

Currently, I am immersed in the world of custom CSS and HTML as I strive to create a visually appealing website design. My goal is to establish a sub-sub menu within my navigation bar menus, but unfortunately, I am encountering difficulties in doing so. Sp ...

htmlcssbootstrap-4navbar

Build within an HTML document

I am currently working on creating a new page for product registration, but I am encountering multiple errors in a specific block of code and unable to find a solution. { for (int i = 0; i < Model.Produto.ListProduto ...

htmlrazor