如何使用离子框架显示子弹列表？

使用离子建立一个应用程序，我有需要显示实际符号列表：如何使用离子框架显示子弹列表？

项目1
项目2
项目3

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

我最终创建了自己的unordered-list CSS样式，为我提供了所需的UI。这是正确的做法吗？或者离子的方式是否有一些被埋在内部的CSS样式，我应该用它来代替？

ty提前。

2014-03-30 thinkbigthinksmall

只需覆盖重置。

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

来源

2014-03-30 12:48:03 JohanVdR

你也可以做文章ul或部分ul取决于你将目标。 – JohanVdR

不要忘记覆盖边界/填充，它们也会被重置。否则，您的子弹可能会在屏幕外或由父元素截断。 – JoshuaDavid

特别针对边距/填充，您需要将其添加到ul CSS，而不是li CSS，例如 'ul，ol list-style-type：disc; padding-left：20px; }' –

您可以为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

来源

2014-03-30 12:50:40 newTag

list-style：circle将子弹显示为圆的轮廓。应该是列表式：光盘。它应该是ul不是ol。 – JohanVdR

@JohanVandenRym感谢您注意:)。我已经更新了我的答案和演示。 – newTag

我看不出子弹或者，他们只是不可见的网页上。添加一些填充固定它：

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

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

来源

2017-12-06 18:59:16

如何使用离子框架显示子弹列表？

回答

相关问题