Home > Article > Web Front-end > How to prevent li in ul from wrapping in css
How to prevent li in ul from wrapping in css
- WBOYOriginal
- 2021-11-18 11:59:473421browse
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.
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>Rendering:
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>Rendering:
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!