jQTouch 列表项目符号不显示

发布于 2024-11-29 22:11:47 字数 498 浏览 1 评论 0原文

我正在尝试将 jQTouch 用于 iPhone Web 应用程序，但我希望页面上的内容能够具有正常的项目符号列表，而不是像 jqt 主题中的栏那样设置样式。所以我试图覆盖 theme.css 中的 css 选择器：

#jqt .content ul {
color: #fff;
    border: none;
font: inherit;
padding: 0;
margin: 15px 10px 17px 10px;
}

#jqt .content ul li {
    color: #fff;
    border-top: none;
    border-bottom: none;

    list-style-type:disc;
    padding: 10px 10px 10px 10px;
    background-image: none;
    overflow: hidden;
}

它工作得很好，因为它覆盖了它，但我没有得到任何可见的列表项目符号。有什么想法吗？

原文

I am trying jQTouch for an iPhone web app, but I want content on the pages to be able to have normal bullet lists, not styled as the bars in the jqt theme. So I am trying to override the css selectors in the theme.css:

#jqt .content ul {
color: #fff;
    border: none;
font: inherit;
padding: 0;
margin: 15px 10px 17px 10px;
}

#jqt .content ul li {
    color: #fff;
    border-top: none;
    border-bottom: none;

    list-style-type:disc;
    padding: 10px 10px 10px 10px;
    background-image: none;
    overflow: hidden;
}

It works fine in that it overrides it, but I don't get any visible list bullets. Any ideas why?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

秋千易 2024-12-06 22:11:47

只需覆盖 li（而不是 ul）

CSS:

div#jqt #textpage li
{
    list-style-type:disc;
    padding: 7px 20px 0px 10px; /* set these as required */
}

HTML:

<!-- PAGE 2d -->       
<div id="page-2d">
    <div class="toolbar">
        <h1>Page Heading</h1>
        <a class="back" href="#page-2">Back</a>
    </div>
    <div id="textpage" >
        <h1>My heading</h1><br />
        <p>Stuff</p> 
        <p>More Stuff</p><br />
        <h2>Sub Heading</h2>
        <!-- Note No <ul> works don't know why -->  
        <li>My List Item1 </li>
        <li>My List Item2 </li>

Just overwrite the li (not the ul)

CSS:

div#jqt #textpage li
{
    list-style-type:disc;
    padding: 7px 20px 0px 10px; /* set these as required */
}

HTML:

<!-- PAGE 2d -->       
<div id="page-2d">
    <div class="toolbar">
        <h1>Page Heading</h1>
        <a class="back" href="#page-2">Back</a>
    </div>
    <div id="textpage" >
        <h1>My heading</h1><br />
        <p>Stuff</p> 
        <p>More Stuff</p><br />
        <h2>Sub Heading</h2>
        <!-- Note No <ul> works don't know why -->  
        <li>My List Item1 </li>
        <li>My List Item2 </li>

回复收藏 0 原文

执手闯天涯 2024-12-06 22:11:47

根据我所做的快速测试，隐藏的溢出似乎是问题所在。

这就是我在我的项目中使用的，它的工作就像一个魅力：

ul.text, .text ul
{
    border: 0;
    background: transparent;
}
ul.text li, .text ul li
{
    list-style-type: disc;
    -webkit-border-radius: 0;
    border-radius: 0;
    filter: 0; // hide IE gradient
    margin-left: 19px;
    background: transparent; 
    border: none;
    font-size: 1em;
    font-weight: normal;
}

希望它有帮助

Overflow hidden seems to be the problem, based on a quick test i did.

This is what i am using for my project and its working like a charm:

ul.text, .text ul
{
    border: 0;
    background: transparent;
}
ul.text li, .text ul li
{
    list-style-type: disc;
    -webkit-border-radius: 0;
    border-radius: 0;
    filter: 0; // hide IE gradient
    margin-left: 19px;
    background: transparent; 
    border: none;
    font-size: 1em;
    font-weight: normal;
}

Hope it helps

回复收藏 0 原文