How to convert bullet points into horizontal list?


Tags: html,css,list

Problem :

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?



Solution :

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.


    CSS Howto..

    Css and jQuery: How do I trigger the repositioning of a CSS3-animated element back to where it was before the animation?

    How to make my text appearing while scrolling website

    How do I make a placeholder for a 'select' box?

    how to show css text in html div

    How to design HTML header

    Font Styling Issue ~ how to make font smooth/Strong in html css

    CSS Dropdown menu - How to add thumbnails

    How to make all cross browser compatible skewed div edges?

    How do I insert a custom font to text with CSS? [duplicate]

    How to prevent Float contents overlap other contents below

    How to make the background image responsive

    how do i css position this divs according to my layout picture?

    How to change css pseudo elements in javascript? [duplicate]

    JavaScript, AngularJS: How do I know if element is larger than its container?

    How to change button colors upon click (Javascript)?

    How to override all of the CSS for a specific element?

    How to retrieve the background image url defined in CSS?

    How to manage clashing third party CSS

    How to make the click logo appear without a href in css/html?

    how to to set chat box based on user id using css

    how to make an ul lay out horizontally?

    Rails How to include a scss file in a specific erb view? [duplicate]

    How can I center these varied number of elements within a div?

    How can I use :nth-child() to select every other
    within ALL children?

    How can I remove vertical padding from ionic icon?

    How to make a HTML5 spinning list/rotating wheel selector/picker

    How to style Flipview as inline-block?

    How can I stretch an empty floating div to the full height available using css?

    Show div when hover another div using only css

    How to get a asp:Panel's CSS Class in code-behind after it has changed by CSS