Reputation: 8760
How can I align the list items at the left page margin of the slide?
It seems that revealjs
is always using the longest list item text, centers it at the slide then left aligns all other list items under this one:
---
title:
output:
revealjs::revealjs_presentation
---
## list items
* a
* picture
* says more
* than a thousand words
or
1. item 1
1. item 2
I have tried to embed a CSS style sheet after the slide header, but it has no impact:
<style type="text/css">
.reveal li {
text-align: left;
}
</style>
PS: I am using RStudio with the revealjs
package.
Upvotes: 6
Views: 4230
Reputation: 8760
I have found the solution.
For a consistent layout I left align not only the unordered and ordered list items but also text paragraphs using the following embedded style:
---
title:
output:
revealjs::revealjs_presentation
---
## list items
<style type="text/css">
.reveal p {
text-align: left;
}
.reveal ul {
display: block;
}
.reveal ol {
display: block;
}
</style>
* a
* picture
* says more
* than a thousand words
or
1. item 1
1. item 2
Sources:
You can browse the list of styles that revealjs defines to find out the active property values:
https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss
Examine the semantics of the different property values to find your desired layout, e. g. for the display
property:
Upvotes: 15