CODEWITHSUNDEEP
cssreveal.js
Andreas
Andreas

Reputation: 1136

left align lists in reveal presentations

In a reveal presentation using the default black.css theme, I'd like to left align the presentation.

Using a local.css I can left align the text via

.reveal p {
    text-align: left;
}

But I am not able to left align lists.

Reading this question I've tried to put

.reveal li { display: block }
.reveal li:before {
  content: counter(item) ". ";
  counter-increment: item;
  width: 2em;
  display: inline-block;
}

into my local.css, but that did not help.

EDIT: Added Example

Here is a minimal example with my local.css demonstrating the missing alignment of the list.

Upvotes: 2

Views: 1572

Answers (1)

Andreas
Andreas

Reputation: 1136

Figured it out. Turns out to be easy. Changing the display property of ul|ol|dl from inline-block to block solved my problem.

I added this to my local.css:

.reveal ol,
.reveal dl,
.reveal ul {
  display: block;
  text-align: left;
  margin: 0 0 0 1em; }

Upvotes: 3

Related Questions