# Formatting Bulleted Lists

**URL:** <https://forums.ankiweb.net/t/formatting-bulleted-lists/8553>\
**Category:** Help\
**Created:** [March 21, 2021, 9:24am UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553 "2021-03-21T09:24:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![GhostFlipper829](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@GhostFlipper829](https://forums.ankiweb.net/u/GhostFlipper829)\
**Post date:** [March 21, 2021, 9:24am UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/1 "2021-03-21T09:24:01Z")

</div>

This still isn’t working the bullet points are way off to the left. Attached are the images after inputting the data provided in a previous potential solution. 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

 ![Still Not right #2](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/c/c505d5ac29bb622fbb6365c93bd2b5a931c74874.png) ![Still Not right #4](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/1/168950b2be7088e4c72bf987e2346c667fd25b26.png) ![Still Not right #3](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/a/a798daa8bcbf0deb4253d157b9282ed23cf5fe20.png) ![Still Not right #1](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/c/c037c5d938f51abcd7e7299ba0d410fcddc62e9c.png)

---

<div class="post-metadata">

**Author:** ![bdesham](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/bdesham/32/3768_2.png) [@bdesham](https://forums.ankiweb.net/u/bdesham)\
**Post date:** [March 21, 2021, 5:20pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/2 "2021-03-21T17:20:21Z")

</div>

How do you _want_ the card to look? Do you want to keep the text more-or-less centered, but with bullet points to the left? If you’re okay with the text in the list being left-justified, you could try adding this CSS:

```css
li {
    text-align: left;
}

```

If that doesn’t solve your problem, can you show us the HTML you’re using for that example card?

---

<div class="post-metadata">

**Author:** ![GhostFlipper829](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@GhostFlipper829](https://forums.ankiweb.net/u/GhostFlipper829)\
**Post date:** [March 21, 2021, 5:40pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/3 "2021-03-21T17:40:00Z")

</div>

I want the answers to the cards to look like this with the correct indentation.  
It can be orientated to the left or in the middle as long as the bulleted list and indentation are correct  
 ![Anki Example 1](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/e/e38d4d7627b63aaf889f5211006a1b860d379feb.png)

---

<div class="post-metadata">

**Author:** ![dae](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/dae/32/65_2.png) [@dae](https://forums.ankiweb.net/u/dae)\
**Post date:** [March 22, 2021, 3:17am UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/4 "2021-03-22T03:17:48Z")

</div>

Are you pasting from a Microsoft product like Word? If so, you might have more luck opening the files in LibreOffice and pasting from there instead.

---

<div class="post-metadata">

**Author:** ![GhostFlipper829](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@GhostFlipper829](https://forums.ankiweb.net/u/GhostFlipper829)\
**Post date:** [March 22, 2021, 7:59am UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/5 "2021-03-22T07:59:41Z")

</div>

No, I just want the format to look like this

---

<div class="post-metadata">

**Author:** ![bdesham](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/bdesham/32/3768_2.png) [@bdesham](https://forums.ankiweb.net/u/bdesham)\
**Post date:** [March 22, 2021, 1:55pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/6 "2021-03-22T13:55:51Z")

</div>

Have you tried adding that bit of code I posted into the Styling section? What were the results?

---

<div class="post-metadata">

**Author:** ![GhostFlipper829](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@GhostFlipper829](https://forums.ankiweb.net/u/GhostFlipper829)\
**Post date:** [March 22, 2021, 5:13pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/7 "2021-03-22T17:13:15Z")

</div>

Yes this is perfect, is there any way to align it to the middle but to keep how it is formatted with the words coming straight after the bullet point. If not doesn’t matter because this will do.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/e/e64d6ccc54722f8773d1213b7b3528dde9aa503d.jpeg)

---

<div class="post-metadata">

**Author:** ![bdesham](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/bdesham/32/3768_2.png) [@bdesham](https://forums.ankiweb.net/u/bdesham)\
**Post date:** [March 22, 2021, 6:03pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/8 "2021-03-22T18:03:59Z")

</div>

This is kind of a hacky solution but I think it will work. Add the following CSS to the Styling section:

```css
.container {
  max-width: 40vw;
  margin: 0 auto;
}

```

This will center the area corresponding to the Back Extra field. The text within will still be left-aligned, but the field itself will be closer to the center of the window. The 40 means that the field is limited to taking up 40% of the width of the window; you may want to increase that number if the text area is too narrow.

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [March 22, 2021, 6:51pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/9 "2021-03-22T18:51:44Z")

</div>

This is the exact reason why I suggested using an inline-block container for your content.

You want it to look like this, right?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/a/a8ba318aa611d8d1e73cbad41a89a46d422bd39b.png)

The only change you’d have to make from my original answer

> [@Aligning Bulleted Lists](https://forums.ankiweb.net/t/aligning-bulleted-lists/8366/4):
>
> **Front:**  
> `<div>{{cloze:Text}}</div>`

is this:

```
<div class="container">
    <div>{{cloze:Text}}</div>
</div>

```

I just didn’t think you’d need the aligned lists on the front as well, so I only used the container on the back.  
HTML/CSS is very easy to learn, I can only recommend you get used to it, so you can get creative with your cards 😉

---

<div class="post-metadata">

**Author:** ![GhostFlipper829](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@GhostFlipper829](https://forums.ankiweb.net/u/GhostFlipper829)\
**Post date:** [March 22, 2021, 6:52pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/10 "2021-03-22T18:52:23Z")

</div>

Unfortunately this hasn’t worked. I’ve clicked save. As you can see it is still to the left.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/f/f1146e15e0d8363883f01dfd040f4af148af9769.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/a/a806c31a4901939c93343b829bda6f6dea5118d5.jpeg)

---

<div class="post-metadata">

**Author:** ![GhostFlipper829](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@GhostFlipper829](https://forums.ankiweb.net/u/GhostFlipper829)\
**Post date:** [March 22, 2021, 7:00pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/11 "2021-03-22T19:00:10Z")

</div>

This doesn’t work for me, I’ve tried inputting the css instead of and in addition to the original container code you gave

 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/5/564ce564b2894db2ec34e4f2e4f1b7954c04eafc.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/3/3f0e1605fff1f9cba323daff7fc4d539bac26b59.jpeg)

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [March 22, 2021, 7:03pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/12 "2021-03-22T19:03:01Z")

</div>

You inserted the HTML for the front side into the Styling section (CSS).

> [@kleinerpirat](#):
>
> ```auto
> <div class="container">
> <div>{{cloze:Text}}</div>
> </div>
> 
> ```

That part needs to be in the Front Template 🙂  
You just need to replace what’s currently in the Front Template with this (& delete it from the Styling section).

---

<div class="post-metadata">

**Author:** ![Gueazy](https://avatars.discourse-cdn.com/v4/letter/g/58f4c7/32.png) [@Gueazy](https://forums.ankiweb.net/u/Gueazy)\
**Post date:** [March 23, 2021, 4:56pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/13 "2021-03-23T16:56:54Z")

</div>

Hey man, you can add this in the “styling” section of your card :

ul { display: inline-block; text-align: left; }  
ol { display: inline-block; text-align: left; }

ol is for 1. 2. 3… and ul is for the bullet  
Tell me if its works

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [March 23, 2021, 7:18pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/14 "2021-03-23T19:18:31Z")

</div>

## EDIT:

> [@Gueazy](#):
>
> ul { display: inline-block; text-align: left; }  
> ol { display: inline-block; text-align: left; }

This is a much cleaner solution and works just as well. @GhostFlipper829 Sorry for any confusion I caused with my setup.

My originally suggested setup (from the other topic) works too, but it’s unnecessarily complex.

> **Container-setup**
>
> The style `inline-block` has to be applied to the parent element of the lists (`<div class="container">`), which is centered because of `.card {...text-align:center;...}`.
> 
> There’s no need to style the lists, they inherit `text-align:left` from the container class anyway.
> 
> * * *
> 
> Been doing it like this for a while and never noticed any issues.
> 
> ## Front
> 
> > **Click to expand**
> >
> > ```
> > <div class="container">
> > <div>{{cloze:Text}}</div>
> > </div>
> > 
> > ```
> 
> ## Back
> 
> > **Click to expand**
> >
> > ```
> > <div class="container">
> > <div>{{cloze:Text}}</div>
> > <br>
> > <div>{{Back Extra}}</div>
> > </div>
> > 
> > ```
> 
> ## Styling
> 
> > **Click to expand**
> >
> > ```
> > .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;
> > }
> > 
> > ```

---

<div class="post-metadata">

**Author:** ![Gueazy](https://avatars.discourse-cdn.com/v4/letter/g/58f4c7/32.png) [@Gueazy](https://forums.ankiweb.net/u/Gueazy)\
**Post date:** [March 23, 2021, 10:48pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/15 "2021-03-23T22:48:23Z")

</div>

Cool? My setup its just like 2 lines, very simple and its works too. No need to feel targeted.

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [March 24, 2021, 10:10am UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/16 "2021-03-24T10:10:54Z")

</div>

Sorry Gueazy if that came over as offensive, that was not my intention. Your solution is simpler and more elegant, I just tried it 😉 👌

I’ve been trying to help on this matter for a few days now without much success, so some of that frustration might have leaked through there.

---

<div class="post-metadata">

**Author:** ![GhostFlipper829](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@GhostFlipper829](https://forums.ankiweb.net/u/GhostFlipper829)\
**Post date:** [March 25, 2021, 11:01am UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/17 "2021-03-25T11:01:24Z")

</div>

> [@Gueazy](#):
>
> ul { display: inline-block; text-align: left; }  
> ol { display: inline-block; text-align: left; }

Thank you for this, it’s extremely simple and works perfectly. CAnnot thank you enough

---

<div class="post-metadata">

**Author:** ![GhostFlipper829](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@GhostFlipper829](https://forums.ankiweb.net/u/GhostFlipper829)\
**Post date:** [March 25, 2021, 11:01am UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/18 "2021-03-25T11:01:36Z")

</div>

Thank you for all of your help kleinerpirat

---

<div class="post-metadata">

**Author:** ![psale](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/psale/32/1876_2.png) [@psale](https://forums.ankiweb.net/u/psale)\
**Post date:** [September 3, 2021, 11:56pm UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/19 "2021-09-03T23:56:32Z")

</div>

@GhostFlipper829 @Gueazy Many thanks for these two lines of elegant CSS code. I have been looking all over Google for just this bit of CSS for my Anki decks.

---

<div class="post-metadata">

**Author:** ![AnkiUser123](https://avatars.discourse-cdn.com/v4/letter/a/e480ec/32.png) [@AnkiUser123](https://forums.ankiweb.net/u/AnkiUser123)\
**Post date:** [October 13, 2021, 8:57am UTC](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553/20 "2021-10-13T08:57:19Z")

</div>

I have also been looking for the aligned indent list solution.

I have tried to paste the codes to my style but didn’t work, do you mind sharing a screen capture of your current code?

Would really appreciate it!

[Next page](https://forums.ankiweb.net/t/formatting-bulleted-lists/8553.md?page=2)