The inline display property does not function properly with the <li> element

Here is the HTML code snippet I am working with:

<div class="nav">
<ul class="nav-dots">
  <li class='ni n1'><a href="" class='nia'>dot</a></li>
  <li class='ni n2'><a href="" class='nia'>dot</a></li>
  <li class='ni n3'><a href="" class='nia'>dot</a></li>
</ul>
</div>

There is some CSS that goes along with the HTML code:

.nav-dots {
   display: inline-block;
}

Although the <li> elements are supposed to display inline, they are not. I'm unsure about what's causing this issue. How can I go about fixing it?

I have created a jsfiddle for reference.

htmlcss

Answer №1

.navigation-dots is a class that has been assigned to the main unordered list (ul). To ensure proper alignment, you must apply the style rule display: inline; directly to the list items (li).

li {
  display: inline;
  list-style-type: none;
}

FIDDLE

Answer №2

It should look like this:

.nav-dots li {
    display: inline-block;
}

Alternatively, you can use:

.ni {
    display: inline-block;
}

Your CSS is mistakenly targeting the ul instead of its li children with the inline-block display property.

Answer №3

in addition

.ni{display:inline}

is functional

Answer №4

inherit is not a property that is automatically applied across elements. To maintain the existing structure and ensure that the list items are displayed inline, you must explicitly define their display property as inherit:

li {
    list-style-type: none;
    display: inherit;
}

For a live example, check out this jsFiddle

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

Using the flex:1 property does not automatically make my elements the same size and cover the entire height of the container

I have 2 containers and I want the elements in each container to fill the entire container. My goal is to make one container appear larger than the other. https://i.stack.imgur.com/73yoR.jpg Even though I am using the flex: 1 property, it does not seem t ...

css

Using the 'onended' audio event emitter in Angular 2 along with a local member of the Component

I'm looking for assistance on how to utilize audio.onended() in order to play the next song in a playlist. I can successfully add songs to the playlist and play them using the above method with an audioObject. However, when audio.onended triggers, I ...

javascripthtmlangularaudio

Syncing Facebook Likes with Safari on iPad

Encountering an issue with the Facebook like button alignment specifically in Safari on iPad. It displays correctly in Safari on OSX. Check out this example. Any ideas on what CSS is needed to ensure it's left aligned in one row on the iPad? ...

cssalignmentfacebook-like

Is there a way to ensure that the text stays positioned behind the initial image even as the window size is adjusted

<html> <head> <title> Example </title> <style> img:hover {opacity : 0.3;} img {z-index : 1; height : 33%; width : 33%; } .first { position : absolute; top: 0%; left: 0%;} .second {position : absolute; top: 0%; left: 33%; ...

htmlcss

Styled Components do not have the ability to define :hover states

export const WatchVideoButtonWrapper = styled.div` position: absolute; bottom: 80px; right: 33px; background-color: ${(props) => props.bgColor}; color: ${(props) => props.color}; border-radius: 100px; transition: all 0.1s; ...

javascriptcssreactjsanimationstyled-components

Find a python BeautifulSoup class name that can change dynamically

I'm working on extracting a variable class name using Python and BeautifulSoup. The specific class is a child of the "bar" class but it's located in a different div. <div class="foo"> <div class="bar"> <div class="===& ...

pythonhtmlvariablesbeautifulsoupclassname

Adding text to a horizontal scrolling element causes the parent div to be pushed downwards

Can anyone help me understand why inserting text into one of the divs in a horizontally scrolling div causes the parent div to move downward? Looking for suggestions! @import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700&apo ...

htmlcss

When implementing CSS, the background image in the header section of my webpage is not visible to me

I'm currently working on a basic webpage and encountering an issue with setting an image as the background for my header section. Despite using what I believe to be the correct code in the CSS section, specifying the right path and file name for the i ...

htmlcss

What is the best way to format a condensed script into a single line?

There are times when the script in the web browser is packed into one line like function a(b){if(c==1){}else{}}. I have attempted to locate something that would display it in a more normal format. function a(b) { if(c==1) { } else { } } Howev ...

javascripthtmlbrowser

"Combining HTML, PHP, and JavaScript for Dynamic Web

Here is the PHP function that retrieves the visitor's profile image thumbnail: <?php echo voip_profile_image($visitorid,'thumb'); ?> The issue lies in the fact that $visitorid is stored in JavaScript under the sRemoteid parameter. Wi ...

javascriptphphtml

I have encountered an issue with my rows breaking improperly when viewing them in a PDF format, particularly when I include a minus

Whenever I try to view my HTML page in PDF form, I encounter an issue. The problem arises when the numerical values are too large, causing a line break between the minus sign and the values. Here is an example of the HTML page which appears perfectly: ent ...

javascriptpythonhtmlpdfwkhtmltopdf

What happens in the React tutorial when the clear fix is commented out and the appearance does not change?

Currently, I am working through the React tutorial and have encountered a question regarding their starter code: class Square extends React.Component { render() { return ( <button className="square"> {/* TODO */} </butto ...

javascripthtmlcssreactjs

Adjust the scroll bar to move in the reverse direction

I'm trying to modify the behavior of an overlay div that moves when scrolling. Currently, it works as expected, but I want the scroll bar to move in the opposite direction. For example, when I scroll the content to the right, I want the scroll bar to ...

javascripthtmlcsstypescript

What is the best way to serialize data from non-form elements and make it easily accessible through params[:model]?

I have developed a unique Sinatra application that leverages an external API to load data and exhibit it on a page. Utilizing Sinatra, the information is retrieved and stored in a temporary model instance (which is NOT saved) for seamless access to all its ...

javascriptjqueryhtmlsinatra

Integrating variable interpolation within media queries using Compass/Sass

Is there a method to achieve the desired result in Compass/Sass? $padding: 3em div { padding: $padding; } @media screen and (max-width: 780px) { $padding: 2em; } /* Result: div { padding: 3em; } @media screen and (max-width: 780px) { ...

csscompass-sasssass

Unable to display the retrieved list data using v-for loop from axios get request

I recently started using Vue.js and decided to create a simple HTML website with Vue.js to display data from myphpadmin using axios. Everything was working smoothly until I encountered an issue where I couldn't display the JSON message on my screen. n ...

javascripthtmlvue.jsaxios

Create dynamic cells for CSS grid using JavaScript

I have been manually generating grid cells in a specific pattern by copying and adjusting <div> elements. Although this method works, I am interested in creating an algorithm that can automatically generate the desired layout. The left box in the exa ...

javascripthtmlcssalgorithm

Extracting information from a checkbox list displayed within an HTML table

I have a table with multiple rows and two columns in each row. The first column contains text, and the second column consists of checkboxes. While I was able to retrieve the values from the first column, I am struggling to fetch the values of the selected ...

javascripthtmljsp

The correct method for including a CSS file in a Vue.js application

How can external CSS files be properly added in a Vue.js Application? I have come across multiple methods for adding CSS files in a Vue.js Application. One suggestion is to use the following code: <link rel="stylesheet" type="text/css" href="/static/b ...

javascriptcssvue.js

Tips for saving an HTML image with a unique source format (blob)

As I examine the element, the src displayed for the img is an incredibly long string that had to be significantly shortened for it to fit here. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAMgCAYAAADbcAZoAAAAAXNSR... However, when I extract the src ...

htmlselenium-webdriverbase64blob