jQTouch list bullets not showing
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?
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>
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
Check the display type on the LI. I had this issue because they were set to "block" when they should have been "list-item"
精彩评论