Home > Article > Web Front-end > How to realize li display without line breaks in css
How to realize li display without line breaks in css
- 醉折花枝作酒筹Original
- 2021-04-23 18:39:183463browse
Implementation method: 1. Use the display attribute to convert li into an inline or inline block label. You only need to set the "display:inline|inline-block" style for li; 2. Use the float attribute to float , just set the "float:left" style to the element.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Method one:
display method, you need to convert li into an inline label or an inline block label
<html>
<head>
<style type="text/css">
li {
display: inline; <-- 或者inline-block -->
list-style:none;
margin:0 20px;
}
div {
display: none；
}
</style>
</head>
<body>
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
</body>
</html>Method two:
Select left Float mode, float: left;
<html>
<head>
<style type="text/css">
li {
float: left;
list-style:none;
margin:0 20px;
}
div {
display: none；
}
</style>
</head>
<body>
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
</ul>
</body>
</html>Recommended learning: css video tutorial
The above is the detailed content of How to realize li display without line breaks in css. For more information, please follow other related articles on the PHP Chinese website!