Question

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

第1项
第2项
第3项

但是，框架似乎在<ul>和<li>元素上执行某种CSS重置/魔术，这样它们只能用作结构元素（例如列表），而不是UI。

我最终创建了自己的unordered-list CSS样式，以便为我提供所需的UI。这是自己动手做的正确方法 - 还是离子有一些深藏在我内心深处的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;
}

See demo

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>

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

4 个答案: