CODEWITHSUNDEEP
htmlcsslist
Koala7
Koala7

Reputation: 1404

How to convert bullet points into horizontal list?

I want to show disc bullet points in my horizontal list.

I know that once we define in CSS: display: inline;, the class definition: list-style-type: disc does not work.

So this has been my solution:

                <ul>
                    <li>· EN</li>
                    <li>· ES</li>
                    <li>· ES</li>
                    <li>· DE</li>
                    <li>· FR</li>
                </ul>

I have put the symbol disc bullet point manually in my horizontal list and then I have declared that in my head section: <meta http-equiv="content-type" content="text/html;charset=utf-8" />.

In My coda editor preview they look fine, but if i try to browser it I get � this.

Why? How can I figure it out the problem? Otherwise, what is the best solution to show disc bullet point in a horizontal list?

Upvotes: 9

Views: 32699

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201608

The problem with you approach is twofold. First, the character “·” you are using is not a bullet; it is the MIDDLE DOT with multiple usage, mainly as a separator in texts. The BULLET “•” character is more suitable. Second, you are declaring UTF-8, which is fine, but then you document needs to be UTF-8 encoded in reality, and it apparently is (rather, looking from here, it is probably windows-1252 encoded).

But as a quick fix that does not require a solution to the encoding problem, you can write BULLET using the entity reference &bull;, e.g. <li>&bull;&nbsp;EN</li>.

There are of course other approaches, too. But if you set display: inline, then browsers will not generate bullets, as they do that only for elements that that display: list-item. You would need to include the bullets into the element content, or to use generated content (using the :before pseudo-element).

Upvotes: 3

Idrizi.A
Idrizi.A

Reputation: 12010

Try display:inline-block

CSS

ul li{
    display:inline-block;
}

To work in IE6 and IE7:

CSS

ul li{
    display:inline-block;
    zoom:1;
}

Upvotes: 6

Andy
Andy

Reputation: 1141

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.

Upvotes: 16

Related Questions