<p>I have an html file with an unordered list.  I want to show the list items horizontally but still keep the bullets.  No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.</p>

[{'answer_id': 34427, 'author': 'Erik van Brakel', 'author_id': 909, 'author_profile': 'https://Stackoverflow.com/users/909', 'pm_score': 1, 'selected': False, 'text': '<p>Did you try <code>float: left</code> on your <code>&lt;li/&gt;</code>? Something like this:</p>\n\n<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"\n                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;style type="text/css"&gt;\n        ul li {\n            float: left;\n            margin-left: 2em;\n        }\n    &lt;/style&gt;\n&lt;/head&gt;\n&lt;body&gt;\n    &lt;ul&gt;\n        &lt;li&gt;test&lt;/li&gt;\n        &lt;li&gt;test2&lt;/li&gt;\n    &lt;/ul&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n\n<p>I only tested Firefox 3.0.1, works there. The <code>margin</code> is set because else your bullet overlaps the previous item.</p>\n\n<p>addition:\nBe wary that when you float the items you remove them from the normal flow, which in turn causes the <code>&lt;ul/&gt;</code> to have no height. If you want to add a border or something, you\'ll get weird results.</p>\n\n<p>One way to fix that is to add the following to your styles:</p>\n\n<pre class="lang-css prettyprint-override"><code>ul {\n    overflow: auto;\n    background: #f0f;\n}\n</code></pre>\n'}, {'answer_id': 34443, 'author': 'Chris Marasti-Georg', 'author_id': 96, 'author_profile': 'https://Stackoverflow.com/users/96', 'pm_score': 3, 'selected': False, 'text': '<p>You could also use a background image on the &lt;li&gt; elements, with a padding to keep the text from overlapping it.</p>\n\n<pre class="lang-css prettyprint-override"><code>li {\n  background-image: url(i/bullet.gif) no-repeat center left;\n  padding-left: 20px;\n  display: inline;\n}\n</code></pre>\n'}, {'answer_id': 34507, 'author': 'Neall', 'author_id': 619, 'author_profile': 'https://Stackoverflow.com/users/619', 'pm_score': 2, 'selected': False, 'text': '<p>The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn\'t support them. Simulating it with a background image is probably the best cross-browser way to do it.</p>\n'}, {'answer_id': 34561, 'author': 'Chris James', 'author_id': 3193, 'author_profile': 'https://Stackoverflow.com/users/3193', 'pm_score': 2, 'selected': False, 'text': '<p>Keep them display blocked, give them a width and float left. </p>\n\n<p>That will make them sit by side, which is like inline, and should maintain the list style. </p>\n'}, {'answer_id': 34656, 'author': 'Joel Coehoorn', 'author_id': 3043, 'author_profile': 'https://Stackoverflow.com/users/3043', 'pm_score': 6, 'selected': True, 'text': "<p>The best option I saw in other answers was to use <code>float:left;</code>. Unfortunately, it doesn't work in IE7 which is a requirement here<sup>*</sup> &mdash; you still lose the bullet. I'm not really keen on using a background image either.</p>\n\n<p>What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding <code>&amp;bull;</code> to the my html, rather than styling this.  It's less than ideal, but it's the most compatible option I found. </p>\n\n<hr>\n\n<p><em><strong>edit</strong>: <sup>*</sup>Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.</em></p>\n"}, {'answer_id': 201798, 'author': 'Peter Hilton', 'author_id': 2670, 'author_profile': 'https://Stackoverflow.com/users/2670', 'pm_score': 5, 'selected': False, 'text': '<p>I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the <em>:before</em> selector works for me:</p>\n\n<pre class="lang-css prettyprint-override"><code>ul.tabs li {\n  list-style: none;\n  float: left;\n}\nul.tabs li:before {\n  content: \'\\ffed\';\n  margin-right: 0.5em;\n}\n</code></pre>\n\n<p>I\'m using a square bullet here, but a normal bullet \\2022 would work the same.</p>\n'}, {'answer_id': 15607606, 'author': 'user2194160', 'author_id': 2194160, 'author_profile': 'https://Stackoverflow.com/users/2194160', 'pm_score': -1, 'selected': False, 'text': '<p>You can use following code</p>\n\n<pre class="lang-css prettyprint-override"><code>li {\n    background-image: url(img.gif) no-repeat center left;\n    padding-left: 20px;\n    display: inline;\n}\n</code></pre>\n'}, {'answer_id': 19989335, 'author': 'L.Jordens', 'author_id': 2994084, 'author_profile': 'https://Stackoverflow.com/users/2994084', 'pm_score': 2, 'selected': False, 'text': "<p>It's actually a very simple fix. Add the following to the ul:</p>\n\n<pre><code>display:list-item;\n</code></pre>\n\n<p>Adding this CSS line will add the bullet points.</p>\n"}, {'answer_id': 29008904, 'author': 'kris', 'author_id': 3061233, 'author_profile': 'https://Stackoverflow.com/users/3061233', 'pm_score': 0, 'selected': False, 'text': '<p>You could use Character entities, see reference : <a href="http://dev.w3.org/html5/html-author/charref" rel="nofollow">http://dev.w3.org/html5/html-author/charref</a></p>\n\n<pre><code>&lt;ul class="inline-list&gt;\n  &lt;li&gt; &amp;bullet; Your list item &lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n'}, {'answer_id': 34168327, 'author': 'AenAllAin', 'author_id': 3546985, 'author_profile': 'https://Stackoverflow.com/users/3546985', 'pm_score': 2, 'selected': False, 'text': '<p>I was just messing around and I ran into the same issue with the same browser constraints; when I searched for an answer your post came up without the answer. This is probably too late to help you, but I thought for posterity\'s sake I should post it.</p>\n\n<p>All I did to solve my problem was to embed another list with one item within each list item of the first list; like so...</p>\n\n<p>HTML:</p>\n\n<pre><code>&lt;div class="block-list"&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;ul&gt;&lt;li&gt;a&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;\n    &lt;li&gt;&lt;ul&gt;&lt;li&gt;b&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;\n    &lt;li&gt;&lt;ul&gt;&lt;li&gt;c&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;\n  &lt;/ul&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>CSS:</p>\n\n<pre><code>.block-list &gt; ul &gt; li { display: inline; float: left; }\n</code></pre>\n\n<p>IE7 Page:</p>\n\n<pre><code>    o a o b o c\n</code></pre>\n\n<p>...it is a dumb solution, but it seems to work.</p>\n'}, {'answer_id': 46148156, 'author': 'YeRe415', 'author_id': 8585408, 'author_profile': 'https://Stackoverflow.com/users/8585408', 'pm_score': 0, 'selected': False, 'text': '<p>In HTML, I added a break after each li like this:</p>\n\n<pre><code>&lt;li&gt;Water is Sacred&lt;/li&gt;&lt;br&gt;\n&lt;li&gt;Water is Sacred&lt;/li&gt;&lt;br&gt;\n&lt;li&gt;Water is Sacred&lt;/li&gt;&lt;br&gt;\n&lt;li&gt;Water is Sacred&lt;/li&gt;&lt;br&gt;\n&lt;li&gt;Water is Sacred&lt;/li&gt;&lt;br&gt;\n&lt;li&gt;Water is Sacred&lt;/li&gt;&lt;br&gt; \n</code></pre>\n\n<p>And CSS:</p>\n\n<pre><code>li { float:left; }\n</code></pre>\n'}, {'answer_id': 62758705, 'author': 'Leon', 'author_id': 3619192, 'author_profile': 'https://Stackoverflow.com/users/3619192', 'pm_score': 1, 'selected': False, 'text': '<p>You may set <code>&lt;ul&gt;</code> as a  CSS grid and <code>&lt;li&gt;</code> as cells to get similar layout to inline <code>&lt;li&gt;</code> and keep bullets easily:</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>ul {\n  display: grid;\n  grid-template-columns: 100px 100px 100px; /* or a smarter width setting */\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;\n  &lt;li&gt;item 1&lt;/li&gt;\n  &lt;li&gt;item 2&lt;/li&gt;\n  &lt;li&gt;item 3&lt;/li&gt;\n&lt;/ul&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 63530912, 'author': 'MazeChaZer', 'author_id': 1276288, 'author_profile': 'https://Stackoverflow.com/users/1276288', 'pm_score': 0, 'selected': False, 'text': '<p>Using <code>float: left</code> didn\'t work very well for me because it made the content box of the <code>ul</code> element 0 pixels high. Flexboxes worked better:</p>\n<pre class="lang-css prettyprint-override"><code>ul {\n    display: flex;\n    flex-wrap: wrap;\n}\n\nli {\n    margin-right: 24px;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/34399', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3043/']