How to force li not to wrap in css

Css method to force li not to wrap: 1. Use the display attribute to convert the li element into an inline element or an inline block element. If there are no line breaks before and after the element, it will not be able to wrap. 2. Use the float attribute to add the "float:left;" style to the li element to float the li elements and display them side by side.

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

li is a block element by default, always starting on a new line and occupying an entire line.

<ul>
	<li>
		<a href="http://www.php.cn/">首页</a>
	</li>
	<li>
		<a href="http://www.php.cn/">关于我们</a>
	</li>
	<li>
		<a href="http://www.php.cn/">联系我们</a>
	</li>
</ul>

Rendering:

So how to force li not to wrap? You can use the display or float attributes, which are introduced in detail below.

Method 1: Use the display attribute

Set the "display:inline;" or "display:inline-block;" style to the li tag and display the li tag as Inline elements or inline block elements can prevent the li tag from wrapping.

li {
	display: inline;
	/*display: inline-block;*/
	margin-right: 10px;
	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}

Rendering:

Description:

Characteristics of inline elements:

• Setting the width and height is invalid

• Only setting the margin in the left and right direction is valid, not up and down; the padding setting is valid in both the up, down, left and right directions, which will expand the space

• No automatic line wrapping

Characteristics of inline block elements:

• No automatic line wrapping

• Able to identify width and height

• The default arrangement is from left to right

(Learning video sharing: css Video tutorial)

Method 2: Use the float attribute

Use the float attribute to float the li elements and display them side by side. Floating is a method of taking an element out of the flow of the document, moving it to the left or right and rearranging elements around it.

li {
	float: left;
	margin-right: 10px;
	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}

Rendering:

Description:

Floating is a very useful layout method that can change the page The forward and backward flow order of objects in the object. The advantage of this is that it makes the layout of the content simple and has good scalability.

Floating is a very powerful layout function of CSS layout, and it is also the key issue in understanding CSS layout. In CSS, any element including div can be displayed in a floating manner.

Floating allows the element with the floating attribute set to escape from the control of the standard ordinary flow and move to a specified position in its parent element.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to force li not to wrap in css. For more information, please follow other related articles on the PHP Chinese website!