css - 如何使用离子框架显示项目符号列表？

Question

使用 ionic 构建应用程序，我需要显示一个实际的项目符号列表：

• 第 1 项
• 第 2 项
• 第 3 项

然而，框架似乎对元素进行了某种 CSS 重置/魔法<ul>，<li>因此它们只能用作结构元素（例如列表），而不是 UI。

我最终创建了自己的unordered-listCSS 样式来为我提供所需的 UI。这是自己动手的正确方法吗？还是 ionic 有一些我应该使用的 CSS 样式深埋在里面？

提前。

Answer 1

只需覆盖重置即可。

ol, ul {
  list-style: none;
}

像这样（放在你的 CSS 框架的 CSS 之后）

ul {
  list-style-type: disc;
}

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

<section>    
  <ul class="my-nav">
    <li>List item</li>
    <li>List item</li>
  </ul>
</section>

.my-nav {
  list-style-type: disc;
}

Answer 2

您可以为ul元素提供一个类并定义自己的样式。

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

看演示

Answer 3

我也看不到子弹，它们只是不在可见页面上。添加一些填充修复它：

<style>
.my-modal-list {
    list-style-type: disc;
    padding: 20px;
}
</style>

<ul class="my-modal-list">

Answer 4

尝试这个 ：

<ul style="list-style-type:disc;">
 <li>
   item1
 </li>
 <li>
   item2
 </li>
 <li>
   item3
 </li>
  <li>
   item4
  </li>
</ul>