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?
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.
Try display:inline-block
CSS
ul li{
display:inline-block;
}
To work in IE6 and IE7:
CSS
ul li{
display:inline-block;
zoom:1;
}
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 •
, eg <li>• 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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.