Sometimes, it is necessary to make an inline element display like a block element, and vice versa. A good example is when list elements, which are block elements by default, are made to display as inline elements, so that they are displayed on the same line, as is sometimes done when designing global navigation. The CSS property used for doing this is the display property. It is non-inherited and takes one of several values. Table 10.18 lists some of the commonly used standard ones. Figures 10.69 and 10.70 show how the property is used and depict its effect.
In the example, both the ul{} and ul li a{} rules specify properties used to style text and are included here to only complement the example. The ul{} rule uses the font-family and text-align properties to specify to use Arial font and align the text to the center of each <a> element’s box, and the ul li a{} uses the text-decoration property to specify not to underline the text. More about these text properties is discussed in Chapters 13 and 14. The ul li{} uses the display:inline declaration to force the <li> elements to be displayed as inline elements.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.