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.
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:
http://www.w3schools.com/cssref/pr_class_display.asp
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With