Aligning Bulleted Lists

[GhostFlipper829]

When I create a cloze the cloze deletion list content is centred. However, the bullet points are on the left and the text is in the middle which is really annoying.

I want the bullet list to appear in the middle but be aligned to the left so the words occur right after the bullet point.
Any help would be greatly appreciated!

[kleinerpirat]

TL;DR: You can fix this by wrapping your content in a container with the style “display: inline-block”.
Let me demonstrate this with a very basic note template:

Front Template

Create a container element for your question and answer:

...
 <div class="container">
    <div>{{Front}}</div>
 </div>
...

Back Template

...
 <div class="container">
    <div>{{Front}}</div>
    <hr id=answer>
    <div>{{Back}}</div>
 </div>
...

How the HTML would really look during review

Basically, this is how the output would look on a real card in review, if it contains a list:

<div class="card ...">
  ...
  <div class="container">
     <div>Some question..</div>
     <hr id=answer>
     <div>
       <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
       </ul>
     </div>
  </div>
  ...
</div>

Styling (CSS)

Set your container class to display: inline-block to fix the lists.

.card {
  ...
  text-align: center;
}

.container {
  display: inline-block;
  text-align: left;
}

[GhostFlipper829]

Sorry I literally have no idea what this means

[kleinerpirat]

Assuming you’re using the default Cloze note type.

Change this:

To this:

Template Text for Copy Paste (slightly different from images to keep cloze text centered):

Front:
<div>{{cloze:Text}}</div>

Back:

<div>{{cloze:Text}}</div>
<br>
<div class="container">
    <div>{{Back Extra}}</div>
</div>

Styling:

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

.cloze {
 font-weight: bold;
 color: blue;
}
.nightMode .cloze {
 color: lightblue;
}

.container {
  display: inline-block;
  text-align: left;
}

[GhostFlipper829]

This still isn’t working the bullet points are way off to the left. Attached are the images after inputting the data above. I would even cope with having the cloze deletions parts on the left as long as they are straight after the bullet points with the correct indentation

[MedBooster]

I think the simplest solution is pasting this into the styling section (no need to change anything on the front and back template)
Before and after screenshots are attached
So basically ul = unordered list (bullet points)
and ol = ordered list (numbered points)

ul > li {
  list-style-position: inside;
}

ol > li {
  list-style-position: inside;
}

Hope it helps!

Uploading: image.png(1)…

[jonathan100]

I searched for exactly this solution, thank you so much ! amazing :))