CODEWITHSUNDEEP
htmlcss
Håkon Hægland
Håkon Hægland

Reputation: 40758

Align bullets in unordered list with left margin of heading above?

How can I align the bullets with the left margin of the text above the list? For 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>

This gives the following output in Google Chrome:

enter image description here

Notice that the bullets in List B have disappeared. I would like to have the bullets exactly positioned over (aligned with) the "L" in the <h2> element above the list. Can this be done without using a trial and error approach?

Upvotes: 0

Views: 1022

Answers (3)

Paulie_D
Paulie_D

Reputation: 115109

Just remove margins/padding as necessary and use 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, wrap the paragraphs in a div

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>

Upvotes: 3

Temani Afif
Temani Afif

Reputation: 273010

Build you custom list style using pseudo element and you can easily control what you want:

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;
}

/* to illustrate */
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>

Upvotes: 1

Maycon Mesquita
Maycon Mesquita

Reputation: 4600

You can try this modifications:

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

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

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

</body>

</html>

Upvotes: 0

Related Questions