Anki Forums

Aligning Bulleted Lists

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!

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

Sorry I literally have no idea what this means :thinking:

Assuming you’re using the default Cloze note type.

image

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

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