CSS: Inline UL with square bullets
Posted: Wed Mar 08, 2006 10:22 am
Hi guys, a quick CSS query, I am trying to create an inline unordered list that also has square bullets, I have made them inline and added a margin and so there is a gap etc. but cant get the square bullets to appear next the items.
Here is the CSS and XHTML I have written, any suggestions greatly appreciated
Here is the CSS and XHTML I have written, any suggestions greatly appreciated
Code: Select all
<head>
<style type="text/css">
ul.course
{
margin: 12px 0;
}
ul.course li
{
display: inline;
list-style-type: square;
margin: 0px 8px;
padding: 0px 8px;
}
</style>
</head>
<body>
<ul class="course">
<li>What is Autism</li>
<li>What is Asperger Syndrome?</li>
<li>The body/ mind connection</li>
<li>Diet and Autistic Spectrum Disorder</li>
<li>Family History</li>
<li>Research</li>
<li>Tests</li>
<li>Possible Benefits</li>
<li>Possible Pitfalls</li>
<li>Records</li>
<li>Planning</li>
<li>Case Histories</li>
<li>Recipes and Resources</li>
</ul>
</body>
<html>