How to cancel the display style type of unordered list in css

Cancellation method: 1. Use the "list-style" attribute to cancel the black dot style of the unordered list. The syntax is "unordered list {list-style:none}"; 2. Use the display attribute to cancel none. The sequence list is displayed in lines, and the syntax is "unordered list {display:inline}".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to cancel the display style type of unordered list in css

Unordered list

Unordered list Sorting means there is no serial number, but by default a dot will be displayed in front

• 第一句
• 第二句
• 第三句
• 第四句

Sample code:

nbsp;html>
	
		<meta>
		<title></title>
	
	
		

• 第一句
• 第二句
• 第三句
• 第四句

Screenshot of the effect:

Remove the points from the unordered list

You can remove the dots by using list-style: none;

By writing the style attribute directly in the ul tag or writing a selector, add list-style: none ;You can remove the dots in this sentence.
Sample code:

nbsp;html>
	
		<meta>
		<style>
			#aa{
				list-style: none;
			}
		</style>
		<title></title>
	
	
		

• 第一句
• 第二句
• 第三句
• 第四句

• 第一句
• 第二句
• 第三句
• 第四句

Effect screenshot:

Display in rows

Whether it is an ordered list or an unordered list, it occupies one row by default and is displayed in rows. But we can also display them in one line through the display attribute.

display attribute	Description
none	Do not display
block	Block-level elements (column display)
inline	Inline Element (line display)

Whether it is a block-level element or an inline element, the previous sequence number (including the ordered and unordered point) will be ignored

Sample code:

nbsp;html>
	
		<meta>
		<style>
			.aa li{
				display: inline; <!-- 行内元素（行显示） -->			}
			
			.bb li{
				display: none;  <!-- 不显示 -->			}
			.cc li{
				display: block; <!-- 块内元素（列显示） -->			}
			
			
		</style>
		<title></title>
	
	
		<ol>
			<li>第一句</li>
			<li>第二句</li>
			<li>第三句</li>
			<li>第四句</li>
		</ol>
		
		

• 第一句
• 第二句
• 第三句
• 第四句

• 第一句
• 第二句
• 第三句
• 第四句

Effect screenshot:

(Learning video sharing: css video tutorial)

The above is the detailed content of How to cancel the display style type of unordered list in css. For more information, please follow other related articles on the PHP Chinese website!