Inline list items

HTML & CSS
1

Can anyone tell me how I could go about displaying an unordered list horizontally that includes the disc markers? Also, I need to center the text on the page.

<h1>S K I L L S</h1>
<ul >
<li>Microsoft Expression/Frontpage/Office</li>
<li>Adobe Dreamweaver/Flash/Photoshop/Illustrator</li>
<li>HTML5</li>
<li>CSS3</li>
<li>XML</li>
<li>Javascript</li>
<li>jQuery</li>
<li>PHP</li>
<li>MySQL</li>
<li>Wordpress</li>
</ul>

2

You could do something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

h1, ul {text-align: center;}
ul {margin: 0; padding: 0; list-style-type: none;}
li {display: inline-block; padding-left: 20px; }
li:before {content: "&#8226; ";}


</style>
</head>
<body>

<h1>S K I L L S</h1>
<ul >
<li>Microsoft Expression/Frontpage/Office</li>
<li>Adobe Dreamweaver/Flash/Photoshop/Illustrator</li>
<li>HTML5</li>
<li>CSS3</li>
<li>XML</li>
<li>Javascript</li>
<li>jQuery</li>
<li>PHP</li>
<li>MySQL</li>
<li>Wordpress</li>
</ul>
			
</body>
</html>
3

Neat! What’s the code for the middle-dot, Ralph?

4

Hi Ron. Not quite sure what you mean, but the unicode code point for that bullet is 2022. E.g.

li:before {content: "[COLOR="#000000"]\\20[/COLOR]22";}

With characters like the bullet and :heart: I gather the recommendation is just to use the character rather than the unicode.

[COLOR="#000000"]&#8[/COLOR]226; 

[COLOR="#000000"]&#x[/COLOR]2022;
5

To get a bit more control of the bullet positioning, this would be another option:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

h1, ul {text-align: center;}
ul {margin: 0; padding: 0; list-style-type: none;}
li {display: inline-block; padding-left: 20px; }
li:before {content: "\\2022"; position: relative; left: -8px;}


</style>
</head>
<body>

<h1>S K I L L S</h1>
<ul >
<li>Microsoft Expression/Frontpage/Office</li>
<li>Adobe Dreamweaver/Flash/Photoshop/Illustrator</li>
<li>HTML5</li>
<li>CSS3</li>
<li>XML</li>
<li>Javascript</li>
<li>jQuery</li>
<li>PHP</li>
<li>MySQL</li>
<li>Wordpress</li>
</ul>
	
</body>
</html>

I’ve used the unicode option above, just for comparison, but I would probably use li:before {content: "&#8226;";} in practice.

6

Perfect. Thanks!

You presume a utf-8 charset. Non utf-8 charsets will not interpret nor display the character. For that reason, I use the code instead of the character. Otherwise, I just see a meaningless placeholder in my editor. Guess I’m behind times, huh.

7

You mean, anyone still uses anything other than UTF-8? :-/ But yes, point taken …

This is a useful read: http://mathiasbynens.be/notes/css-escapes

8

thanks ralph m.
that works.

9

You’re welcome. :slight_smile:

BTW, I didn’t notice before that you had spaces between every letter in the heading. That’s a visual effect, so it’s better to do that sort of thing with CSS rather than messing with the HTML. So I would recommend you remove the spaces between the letters and do something like this instead:

h1 {letter-spacing: 8px;}
10

yes, a keen observation. I’m reviewing the whole document and your suggestion will be applied throughout.

11