如何使用離子框架顯示子彈列表？

使用離子建立一個應用程序，我有需要顯示實際符號列表：如何使用離子框架顯示子彈列表？

項目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

如何使用離子框架顯示子彈列表？

回答

相關問題