List Style Position Property

The list item marker, by default, is placed on the left-hand side of the content inside the element. To change this parameter, we use the 'list-style-position' property. It takes three values – inside, outside, and inherit. By default, it is 'outside.'

The ‘inside’ value positions the list item marker in line with the 1st line of while the ‘outside’ value positions it to the left of element.

HTML

CSS

ul {

list-style-position: inside;

}

Horizontally Displaying List

We may want some time to display our list horizontally. Depending on the desired appearance as well as the content, there are few ways to show the lists as in a single line, like, for example, by making the property ‘display’ of the element as inline or inline-block or even by floating them.

Displaying List

One of the simplest ways to show up a list on a single line is to provide the 'display' value of inline-block or inline to the element. Doing such a thing keeps all the element in a single line along with a single space between each list item.

HTML

CSS

li {

display: inline-block;

margin: 0 10px;

}

Floating List

Providing all the element with the property of float to the left will align all the element horizontally next to each other without any space in between. When you are working with the float option, then by default, the list item marker gets displayed and sits on top of the element next to it. To prevent that, you should add up horizontal padding or margin.

HTML

CSS

li {

float: left;

margin: 0 20px;

}

Learn HTML and CSS in 10 Days

Building Your First Web Page

Getting to Know HTML

Getting to Know CSS

CSS Properties

Opening the Box Model

Positioning Content

Working with Typography

Setting Background And Gradients

Creating Lists

Adding Media

Building Forms

Organizing Data With Tables

Writing Your Best Code

Some more HTML and HTML 5 tags

List Style Position Property

Popular Exams

Company

Resources