Hi,

Using CSS, how do I display bullet points automatically, so they display like the following?:

Bullet Point 1 Bullet Point 2 Bullet Point 3 Bullet Point 4

<ul>
<li>Bullet Point 1</li>
<li>Bullet Point 2</li>
<li>Bullet Point 3</li>
<li>Bullet Point 4</li>
</ul>

    You'll want to float 'em left in the ul.

    .yarrrrgh li {
  float: left;
  margin: 4px;
}

<ul class="yarrrrgh">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

      Alternatively, instead of floating the LI elements you can set them to display: inline;, instead (and use padding instead of margin to control the spacing). Which is better will depend on how exactly you want things to work.

        Using the display: inline method, how do I display the bullet points before the actual text? (Except for the first one 😉)

        Instead of:

        • Bullet Point One
        • Bullet Point Two
        • Bullet Point Three
        • Bullet Point Four

        ...Should be:

        Bullet Point One Bullet Point Two Bullet Point Three * Bullet Point Four

          You would need to either assign a CSS class to the first <li> or use a style attribute to set list-style-type:none; for it.

            Cheers for that reply! 😉

            The following code works correct in FF, but not in IE.
            How do I get the code to work in both FF and IE and therefore be cross browser compatible?

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul
{
  float: right;
}

li
{
  float:left;
}
</style>
</head>
<body>

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

</body>
</html>
              Write a Reply...