What is the best method for transforming bullet points into a horizontal list?

Is there a way to display disc bullet points in a horizontal list?

I've encountered an issue where setting display: inline; in CSS prevents the class definition list-style-type: disc from working.

My workaround involves manually inserting disc bullet points into the list:

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

After adding the disc bullet points and declaring 

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
in the head section, the list appears correctly in my Coda editor preview. However, when I view it in a browser, I see . Why is this happening, and how can I troubleshoot the issue? Alternatively, what is the best method for displaying disc bullet points in a horizontal list?

htmlcsslist

Answer №1

Why not opt for float:left instead of switching to display:inline for your li elements? This way, you can still maintain them as block elements and achieve the desired layout:

li {
    float:left; 
}

After that, you have the flexibility to adjust the margins to create the spacing you require.

Answer №2

Experiment with using display:inline-block

Cascading Style Sheets

ul li{
    display:inline-block;
}

If you need compatibility with IE6 and IE7:

Cascading Style Sheets

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

Answer №3

Your method has a couple of issues. Firstly, the character “·” that you are utilizing is not a bullet, but rather the MIDDLE DOT with various uses, primarily as a separator in texts. The BULLET “•” character would be more appropriate. Secondly, you have declared UTF-8, which is correct, but it seems that your document needs to be encoded in UTF-8 in reality, and it appears to be encoded in windows-1252 instead.

As a temporary solution that doesn't require fixing the encoding problem, you can represent the BULLET using the entity reference &bull;, for example, 

<li>&bull;&nbsp;EN</li>
.

There are, of course, other methods to address this issue. If you set display: inline, browsers won't generate bullets as they only do that for elements with display: list-item. You would need to incorporate the bullets into the element content or utilize generated content (using the :before pseudo-element).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Ajax to open and close an HTML tag within separate div elements

I am facing a challenge in my project where I have to dynamically open and close a form using ajax. The form needs to be opened within a div, and then closed in another div below it like the following: Opening form (header div) $('#header').h ...

javascriptjqueryhtmlajax

Javascript is not fetching the value

Here is the code snippet I am working with: var categoryDetailId = $("#createEventForm-categoryDetail-idCategory").val(); and this link from my rendered page: After clicking the button, it returns NaN Update: I tried setting it manually, but it still ...

phpjavascriptjqueryhtml

Instructions on eliminating elements from a list that are smaller than a specified threshold value compared to the preceding number

I am currently tackling the task of creating a new list from a sorted list of increasing numbers. The new list should only include values that are at least 3 greater than the previous number. Despite attempting various conditional statements, I have been u ...

pythonlist

The functionality of jQuery date picker and time picker is compromised when the fields are generated dynamically

I am currently utilizing the jQuery code below to dynamically create multiple input fields, which include time pickers and date pickers. However, I am encountering an issue where they are not functioning as expected. $('#add_another_event').clic ...

javascriptjqueryhtml

Linking children to their parents in a mat tree structure

I'm looking to create a mat tree based on the provided diagram. https://i.sstatic.net/cTY2w.png So far, I've managed to design the icons and boxes, but I'm struggling with drawing the connecting lines. Can anyone assist me with this part? I ...

cssangulartreeangular-material

Parsing HTML in Python 3: A Guide to Extracting Information

Trying to extract text from a webpage using Python 3.3 and then search for specific strings within that text. When a matching string is found, the goal is to store the subsequent text. For instance, taking this page as an example: and I need to preserve ...

pythonhtmlparsing

Use jQuery to insert the TEXT heading as an input value

Can anyone help me with copying text from a heading to an input value? Here's an example: <h2 class="customTitleHead">This is a Heading</h2> I want to transfer the text from the heading into an input field like this: <input type="tex ...

javascriptjquerycsshtml

What are some ways to utilize JavaScript for expanding an HTML form?

I am in the process of developing a basic web application that allows users to create messages with attached files. multiple html file inputs using this javascript link: http://img38.imageshack.us/img38/4474/attachments.gif The functionality to "attach a ...

javascripthtml

Issues with margin and padding-top not functioning properly when using @media for printing

Is there a way to add some space between the top of my webpage and my logo? I've tried adjusting the padding in my CSS, but when I check the print preview in Chrome, no spacing is visible. Below is my HTML code: <div class="container"> < ...

htmlcssmarginpaddingspacing

What is the best way to interact with an element in Python Selenium once it has been located?

I have been working on a script that is supposed to retrieve the attribute of an element and then click on it if the value is true. However, I keep encountering an error in my code. This is the snippet of code I am using: from selenium import webdriver d ...

pythonhtmlcsspython-3.xselenium

The behavior of Mozilla in handling JQuery attr() function may result in variations in design elements such as font-family or font-size

I'm currently working on the login form. Below is my view in CodeIgnitor: <div id="login-form"> <?php echo heading('Login', 2); echo form_open('login/login_user'); echo form_input('email', set_value ...

javascriptjqueryhtmlcss

"Struggling to position the bottom navbar at the center in Bootstrap?

Can someone help me center the icons in my second navigation bar? I've tried aligning them left and right, and that works, but when I try to center them, it doesn't work at all. Did I miss something in the code or make a mistake? Any assistance w ...

htmlcssbootstrap-4navbar

The background image in Internet Explorer's <td> element will only be visible where there is existing content

Greetings to all, this is my first time asking a question here. I am currently facing an issue with a cell's background image. Interestingly, it displays perfectly in Chrome and Firefox, but the problem arises when using Internet Explorer. In IE, th ...

htmlcssinternet-explorer

Looping through items using ng-repeat according to the chosen option in a select dropdown

After expanding my project, I encountered an issue with the main object structure: { screens: [{ id: 0, name: 'Screen0', sections: [{ id: 0, sectionItems: [] }, { id: 1, sectionItems: [] }, { i ...

javascripthtmlangularjsangularjs-ng-repeat

Enlarge the font size without changing the location of the input field

Imagine having an input field with a set height of 25px. If you decide to increase the font size within that text field, even though the dimensions remain constant, it may seem like extra padding has been added. Initially, at a normal font size, it appears ...

htmlcss

Issues with NativeScript WebView displaying HTML file

Having trouble loading a local HTML file into a webview in my NativeScript (typescript) application. Despite using the correct path, it's not loading and instead shows an error. <WebView src="~/assets/content.html" /> An error message stati ...

htmltypescriptnativescript

The scrolling action triggered by el.scrollIntoViewIfNeeded() goes way past the top boundary

el.scrollIntoViewIfNeeded() function is used to scroll to element el if it's not within the visible browser area. Although it generally works well, I have encountered some issues when trying to use it with a fixed header. I have provided an example s ...

javascripthtmlcssscroll

Merging a Dictionary of Lists with Similar Attributes in Python

I am seeking a solution for organizing a list in the most efficient way possible. Here is the original list: values = [{'id':1, 'x':2}, {'id':1, 'y':4}, {'id':1, 'z':6}, {'id':2, ' ...

pythonlistdictionarylist-comprehensiondictionary-comprehension

jQuery document.ready not triggering on second screen on Android device

Why is jQuery docment.ready not firing on the second screen, but working fine on the first/initial screen? I also have jQuery Mobile included in the html. Could jQuery Mobile be causing document.ready to not work? I've heard that we should use jQuery ...

javascriptandroidjqueryhtmljquery-mobile

Tips for adjusting the time format within Ionic 3 using TypeScript

I currently have a time displayed as 15:12:00 (HH:MM:SS) format. I am looking to convert this into the (3.12 PM) format. <p class="headings" display-format="HH:mm" > <b>Time :</b> {{this.starttime}} </p> In my TypeScript code t ...

htmltypescriptdatetimeionic-frameworkionic3