How to Style a Horizontal List with Bullets Between Items Using CSS

How to style a horizontal list with bullets between items using CSS?

Here is a further improved version. I kept getting an inconsistency at certain page widths where two bullets would be missing rather than just the last one. i.e.

link1 · link2 · link3 link4

link5 · link6

I think the issue was that removing the last bullet separator could itself affect the text flow if the page width was just right. The new script locks the original text flow by adding and removing literal line breaks.

I have the same script to run every time the screen is resized so you don't get stuck with awkward line breaks.

<style>
ul { width: 700px; text-align : center }
ul li { display: inline; white-space: nowrap; }
ul li:after { content: " \00b7"; }
ul li.nobullet:after { content: none; }
</style>

<body onresize="processBullets()" onload="processBullets()">
<ul>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
</ul>
<body>

<script>
function processBullets() {
    var lastElement = false;
    $("br").remove(".tempbreak");
    $("ul li").each(function() {
        $(this).removeClass("nobullet");
        if (lastElement && lastElement.offset().top != $(this).offset().top) {
            $(lastElement).addClass("nobullet");
            $(lastElement).append('<br class="tempbreak" />');
        }
        lastElement = $(this);
    }).last().addClass("nobullet");
}

</script>

How to convert bullet points into horizontal list?

Instead of choosing display:inline for your li you could keep them as blocks and do this:

li {
    float:left; 
}

Then you could play with the margins to space them how you need.

Horizontal list items

Updated Answer

I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}

<ul>
    <li> <a href="#">some item</a>

    </li>
    <li> <a href="#">another item</a>

    </li>
</ul>

Horizontal list items

Updated Answer

I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}

<ul>
    <li> <a href="#">some item</a>

    </li>
    <li> <a href="#">another item</a>

    </li>
</ul>

Horizontal list item with line between

Here is an example of a line running between each of the lis.

Sample Image

Add position: relative to the ul so it becomes parent to :after element
Position :after in the vertical middle of the characters using vertical translation
Provide z-index and background-color to lis so they stay "on top of" of the gray line

ul {    display: flex;    align-items: stretch; /* Default */    justify-content: space-between;    width: 100%;    margin: 0;    padding: 0;    position: relative;}
li {    display: block;    flex: 0 1 auto; /* Default */    list-style-type: none;    background-color: white;    padding: 0 0.75em;    z-index: 1;}
li:first-child {    padding-left: 0;}
li:last-child {    padding-right: 0;}
ul:after {    content: '';    border-bottom: 1px solid lightgray;    position: absolute;    transform: translateY(-50%);    top: 50%;    width: 100%;}

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

Styling unordered horizontal list with ...best possible way

No, either one alone is enough. You could even use inline-block if you like, although it doesn't have very good support in FF2. Hiding bullets is done with list-style:none;

You could setup a simple test quickly to check these:

#one, #two, #three { list-style:none }
#one li            { float:left }
#two li            { display:inline }
#three li          { display:inline-block }

<ul id="one">
  <li>Float left</li> 
  <li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="two">
  <li>Display inline</li>
  <li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="three">
  <li>Inline-block</li>
  <li>In this example</li>
</ul>

See how they render: http://jsbin.com/opiqu3/

CSS: Control space between bullet and li

Put its content in a span which is relatively positioned, then you can control the space by the left property of the span.

li span {  position: relative;  left: -10px;}

<ul>  <li><span>item 1</span></li>  <li><span>item 2</span></li>  <li><span>item 3</span></li></ul>

list-style not shown on horizontal list

well, if you do that it won't shw because you're basically declaring "stop displaying the element in its default display method list-item and use inline instead" . To learn more about display methods, please take a look do DISPLAY PROPERTY.

Now, if you want to have bullets AND still display it inline, there are many ways to do it. You can use a :before pseudo-selector, you can use a background, etc.

For example:

ul li {
  display: inline;
}

ul li:before {
  content: "• ";
}

ul li{
  display: inline-block;
}

ul li{
  padding-left:30px; background:url(images/bullet.png) no-repeat 0 50% ;
}

but as long as you "kill" the list-item display method, you'll need to find some ways to override the DOM display of list types

Horizontal list items - fit to 100% with even spacing

The new CSS flexbox specification would be the solution to your problem :)

ul {    display: flex;    align-items: stretch; /* Default */    justify-content: space-between;    width: 100%;    background: #cacaca;    margin: 0;    padding: 0;}li {    display: block;    flex: 0 1 auto; /* Default */    list-style-type: none;    background: #fafafa;}

<ul>    <li>This is menu item 1</li>    <li>Number 2</li>    <li>Item Number 3</li>    <li>Menu 4</li></ul>

How to Style a Horizontal List with Bullets Between Items Using CSS