How can I align bullets in an unordered list with the left margin of the heading above?

Is there a way to line up the bullets with the left margin of the text above the list? Here's an example:

<html>
    <style>
        ul.p1 {padding-left: 40px}
        ul.p2 {padding-left: 0px}
    </style>
<body>    
<h2>List A</h2>
<ul class="p1">
    <li>
        <p>
            Item 1.1
        </p>
        <p>
            Item 1.2
        </p>
    </li>
</ul>
<h2>List B</h2>
<ul class="p2">
    <li>
        <p>
            Item 2.1
        </p>
        <p>
            Item 2.2
        </p>
    </li>
</ul>
</body>
</html>

When viewed in Google Chrome, the following result is displayed:

https://i.sstatic.net/qWryh.png

It is worth noting that the bullets are no longer visible in List B. My goal is to perfectly align the bullets with the "L" in the <h2> element directly preceding the list. Is there a method to achieve this alignment without resorting to trial and error?

htmlcss

Answer №1

Ensure to eliminate any unnecessary margins or padding and apply list-position:inside.

ul {
  list-style-position: inside;
  padding: 0;
}

p {
  display: inline-block;
  margin: 0;
}
<h2>List A</h2>
<ul class="p1">
  <li>
    <p>
      Item 1.1
    </p>
  </li>
  <li>
    <p>
      Item 1.2
    </p>
  </li>
</ul>
<h2>List B</h2>
<ul class="p2">
  <li>
    <p>
      Item 2.1
    </p>
  </li>
  <li>
    <p>
      Item 2.2
    </p>
  </li>
</ul>

Alternatively, enclose the paragraphs within a div tag

body {
  margin: 1em;
}

ul {
  list-style-position: inside;
  padding: 0;
}

div {
  display: inline-block;
  vertical-align: top;
}

p {
  margin: 0;
}
<h2>List B</h2>
<ul class="p2">
  <li>
    <div>
      <p>
        Item 2.1
      </p>
      <p>
        Item 2.2
      </p>
    </div>
  </li>
</ul>

Answer №2

Create your own unique list style using pseudo elements to have complete control over your design:

ul {
  padding-left: 0px;
  list-style: none;
}

li {
  padding-left: 1em;
  position: relative;
}

li:before {
  content: "•";
  position: absolute;
  left: 0;
  font-size: 1.5em;
  line-height: 0.9em;
}

/* example styling */
body {
  border-left:1px solid grey;
}
<h2>List A</h2>
<ul >
  <li>
    <p>
      Item 1.1
    </p>
    <p>
      Item 1.2
    </p>
  </li>
</ul>
<ul style="font-size:30px;">
  <li>
    <p>
      Item 1.1
    </p>
    <p>
      Item 1.2
    </p>
  </li>
</ul>

Answer №3

Consider making these updates:

<html>
    <style>
        ul.list1 {padding-left: 20px}
        ul.list2 {padding-left: 20px}
    </style>
<body>  

<h2>List A</h2>
<ul class="list1">
    <li>Item 1.1</li>
    <li>Item 1.2</li>
</ul>

<h2>List B</h2>
<ul class="list2">
    <li>Item 2.1</li>
    <li>Item 2.2</li>
</ul>

</body>

</html>

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 causing the Bootstrap accordion to not display content when clicked on?

As a beginner in web development, I am currently working on my very first website. One issue I'm facing is with incorporating an accordion-style card in my webpage. Although it allows me to click on different titles, the collapsed ones fail to expand ...

htmlcssbootstrap-4

Table Header Stays Put Without Shrinking or Expanding with Window Adjustment

I have a sticky table header that stays at the top when scrolling down on my web page. To achieve this effect, I followed the solution provided on css-tricks.com/persistent-headers/. However, I encountered an issue where the sticky table header does not ...

javascriptjqueryhtmlcss

How to change the display property in CSS from block to none using React

Just started diving into React, and I am struggling with making the content disappear when clicking a button. Tried using state and even checked out https://jsfiddle.net/uwadhwnr/, but nothing seems to work. Feeling quite frustrated at the moment. <div ...

cssreactjs

Background Patterns on Webpages

My website has a lovely gradient background on the html tag in css, while the body tag showcases a seamless pattern repeating on both the x and y axes. Everything was looking great until I checked the website on an iPad/iPhone in portrait mode, where the ...

javascriptjqueryhtmlcssweb

Is it possible to have 3 divs with the height of the tallest

I have a unique template that I employ for crafting responsive websites. It relies on boxes with percentage widths, floats, and clears. A prime instance can be viewed via this link. Notice how the three boxes vary in height. While it's simple to set a ...

jqueryhtmlcssweb

Ways to incorporate encoded HTML text into string literals

When attempting to insert a HTML encoded special character within a string literal, I am encountering an issue where it does not display as intended in the final document. The approach I am taking is as follows: const head = { title: `${ApplicationName} ...

javascripthtmlencoding

Tips for customizing the appearance of a specific mat-button component in an Angular project

In my Angular application, I have set up a scenario where users are presented with multiple choices through buttons. When a user clicks on a button, a specific component is displayed based on their choice. I am currently working on enhancing the styling of ...

htmlcssangularangular-materialangular-material2

Is it possible to display multiple slideshows in separate tabs on a single page simultaneously?

I am trying to create multiple slideshows, each in a different tab on the same page. Although I am not an expert, I am attempting to figure out how to have the slideshow repeat with buttons controlling each one separately. When adding the complete script ...

htmlcssslideshow

Discovering the selected row with jqueryIs there a way to locate

There is a table with rows and a button that allows you to select a row: <table id="mytable" class="table-striped"> <tbody> <tr id="1"><td>Test1</td></tr> <tr id="2"><td>Test2</td>& ...

javascriptjqueryhtml

Hover over the image with some padding placed around it to see

I am struggling to figure out how to add padding to my image when hovering over it with Onmouseover. I have tried multiple solutions but none seem to be working. Here is the original code: <img src='/wp-content/uploads/2015/04/img-white.png' ...

javascriptcss

The CSS transition fails to function correctly once a specific function is executed

When I hover over a div, the background color changes due to a transition effect. However, if I click on a button that triggers myFunction2 to change the background color of the div before hovering over it, the transition effect no longer works. functi ...

javascripthtmlcss

Firefox fails to render SVG animation

Currently, I'm attempting to incorporate this unique animation into my website: http://codepen.io/dbj/full/epXEyd I've implemented the following JavaScript code in order to achieve the desired effect: var tl = new TimelineLite; tl.staggerFromTo ...

javascriptcssfirefoxsvggsap

Can anyone assist with troubleshooting the font size issue for a JavaScript tooltip on Joomla 1.5 with CK Forms?

My Joomla 1.5 site has CK Forms installed and is functioning properly, except for one issue: the tooltip on the captcha is not displaying correctly. It appears in a tiny 1px font size. Even though I have tried debugging using Firebug and confirmed that the ...

javascriptcssfirebugjoomla1.5

Utilize Wordpress TinyMCE to apply the underline decoration using the "U" tag instead of the style

Is there a way to modify the function of the button in the WordPress content textarea of TinyMCE? Specifically, I am referring to the "u" button for underline formatting. <span style="text-decoration-line: underline;">text underlined</span> I ...

htmlwordpresstinymceeditor

Using jQuery to dynamically insert variables into CSS styles

I am attempting to use jQuery 3 to modify the CSS of a class and change the background color. My first step is converting an rgba color code (properties.color) to a hexadecimal code, which is functioning correctly. Next, I try to change the background co ...

javascriptjquerycss

Setting objects in parallel in HTML involves using the display property along with the value

Creating two sign-up forms using HTML and CSS Bootstrap. Want them to be parallel, tried using the position tag but there is unwanted space created between the forms. View the output How can I prevent this circle of space from being generated? <main cl ...

htmlcsstwitter-bootstrap

The jQuery bookmarklet in the djangobyexample book is completely unresponsive

As I work my way through Django By Example, I came across a chapter where a jQuery bookmarklet is created within a Django app. This allows users to easily save jpg images from websites into their user profile area within the Django app. Although the tutor ...

javascriptjquerypythonhtmldjango

Toggle the visibility of a div based on the id found in JSON data

I am looking to implement a JavaScript snippet in my code that will show or hide a div based on the category ID returned by my JSON data. <div id="community-members-member-content-categories-container"> <div class="commun ...

javascripthtmlcss

Is there a way to use jQuery to eliminate divs that contain multiple identical data values?

Is there a way to accomplish this? <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="08-March-2016"></div> <div class="chat_timestamp_group" data-date="14-March-2016" ...

javascriptjqueryhtml

Place the div at the bottom of the container with a flexible height determined by the content-wrapper

Can anyone help with a css problem I'm having? I am trying to create two columns, each containing dynamic content and images at the bottom of the column. Here is an example image for reference: https://i.sstatic.net/pvOef.png I want these image bloc ...

htmlcss