Using ionic to build an app, and I have a need to display an actual bullet list:
However, it appears that the framework does some sort of CSS reset / magic on <ul> and <li> elements such that they should only be used as structure elements (e.g. a list), rather than as UI.
I ended up creating my own unordered-list CSS style to give me the UI I needed. Is that the right way to do-it-yourself - or does ionic have some CSS style buried deep inside that I should have used instead?
ty in advance.
Just overwrite the reset.
ol, ul {
list-style: none;
}
Like this (place in your CSS after the CSS of the framework)
ul {
list-style-type: disc;
}
Best practise: set a class on the navigation element namely the ul.
<section>
<ul class="my-nav">
<li>List item</li>
<li>List item</li>
</ul>
</section>
.my-nav {
list-style-type: disc;
}
You can gave a class for the ul element and define your own style.
HTML:
<div id="list">
<h5>Just three steps:</h5>
<ul>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ul>
</div>
CSS:
#list {
width: 170px;
margin: 30px auto;
font-size: 20px;
}
#list ul {
margin-top: 30px;
}
#list ul li {
text-align: left;
list-style: disc;
margin: 10px 0px;
}