How can I nest an unordered list in an ordered list in vue 2 ?? I have tried
<template>
<div class="p-14">
<ol class="numberlist">
<li>An numbered list</li>
<li>Containing
<ul class="sqaredotlist">
<li>A dotted list</li>
<li>Containing
<ol class="romanlist">
<li>A roman numeral list</li>
<li>And some items</li>
<li>Like this</li>
</ol>
</li>
<li>And some items</li>
<li>Like this</li>
</ul>
</li>
<li>And some items</li>
<li>Like this</li>
</ol>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
ol.numberlist {
list-style-type: decimal;
}
ul.sqaredotlist {
list-style-type: square;
}
ol.romanlist {
list-style-type: lower-roman;
}
</style>
but that gives me. It looks like the unordered elements are interpreted as ordered.
1. An numbered list.
2. Containing
1. A dotted list
2. Containing
1. A roman numeral list
2. And some items
3. Like this
3. And some items
4. Like this
3. And some items
4. Like this
Without the css classes I get the same result. If anyone knows how to nest an unordered list in an ordered list, please help me !!
Perhaps a different file in your directory is affecting this Vue file. Is there a 'global' stylesheet in your project? Maybe that stylesheet says:
li {
list-style-type: decimal !important;
}