Formatting nested lists for cloze cards

[bensankiaccount]

Hi. I’m trying to change the formatting of nested lists in my cloze cards. I want them to look like they do in the browser, but centered:

however, they look like this:

Below is the template information for the cards
Front Template:

{{cloze:Text}}
{{cloze:Text 2}}
{{cloze:Text 3}}
{{#Hint}}<br>{{hint:Hint}}{{/Hint}}
{{#Image}}<br>{{Image}}{{/Image}}
{{#Audio}}<br>{{Audio}}{{/Audio}}

Back Template:

{{cloze:Text}}
{{cloze:Text 2}}
{{cloze:Text 3}}
{{#Back Extra}}<hr>{{Back Extra}}{{/Back Extra}}
{{#Image}}<br>{{Image}}{{/Image}}

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

ul { display: inline-block; text-align: left; } #unordered list formating
ol { display: inline-block; text-align: left; } #ordered list formating

[abdo]

I tried with this HTML and your template:

<ul><li>list parent</li><ul><li>{{c1::list child 1}}</li><li>list child 2</li><li>list child 3</li></ul></ul>

And got the expected result.

Can you post the HTML contents of the field? If they are no different, I suggest ruling out add-ons: When problems occur - Frequently Asked Questions

[bensankiaccount]

Thank you abdo! Your HTML produces the intended result in my case as well. Here is the HTML for the weird result:

I made the note in the editor for the addon “extended editor for tables searchreplace”. Is there a way for me to produce your result in either that addon or the default editor, or will I have to edit the HTML to resemble yours for my notes

[abdo]

Removing display: inline-block; should fix that.