How to prevent li in ul from wrapping in css-CSS Tutorial-php.cn

How to prevent li in ul from wrapping in css

WBOY

Release： 2021-11-18 11:59:47

Original

3428 people have browsed it

How to make the li in ul not wrap in css: 1. Using the float attribute, you only need to add the "{float:left;}" style to the li element. 2. Using the display attribute, you only need to add the "{display:inline;}" style to the li element.

How to prevent li in ul from wrapping in css

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

How to make the li in ul not wrap in css

How to make the li in css force not to wrap in the following article. Let me introduce how to use CSS to force ul li not to wrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

1. Use the float style to display li elements side by side without line breaks.

In CSS, you can use the float attribute to float 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.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
float: left;
margin-right: 10px;
list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>

Copy after login

Rendering:

How to prevent li in ul from wrapping in css

2. Use display to display li side by side without line breaks

## The #display attribute specifies the type of box the element should generate.

The display attribute is used to define the type of display box generated by the element when creating a layout. For document types such as HTML, using display carelessly can be dangerous, as it may violate the display hierarchy already defined in HTML. For XML, since XML doesn't have this kind of hierarchy built in, all display is absolutely necessary.

inline: Default. This element will be displayed as an inline element with no line breaks before or after the element.

Use display:inline to display the li element as an inline element, with no line breaks before and after the element.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
display:inline
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>

Copy after login

Rendering:

How to prevent li in ul from wrapping in css

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of How to prevent li in ul from wrapping in css. For more information, please follow other related articles on the PHP Chinese website!