如何使用离子框架显示项目符号列表？ [英] how to display a bullet list using ionic framework?

问题描述

使用离子建立应用程式，我需要显示实际的项目符号清单：

Using ionic to build an app, and I have a need to display an actual bullet list:

• item 1


• 第2项
第2项

• 第3项

• item 1
• item 2
• item 3

框架在< ul> 和< li> 元素上执行某种CSS重置/魔术，应仅用作结构元素（例如列表），而不是UI。

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.

我最终创建了自己的无序列表 CSS样式，给我所需的UI。这是正确的方式做自己动手 - 或者离子有一些CSS风格深埋在内部，我应该使用？

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提前。 p>

ty in advance.

推荐答案

正在覆盖重置。

ol, ul {
  list-style: none;
}

$ b

Like this (place in your CSS after the CSS of the framework)

ul {
  list-style-type: disc;
}

最佳实践：在导航元素上设置一个类，即ul。 p>

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;
}

这篇关于如何使用离子框架显示项目符号列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！