Home > Article > Web Front-end > How to use li to arrange horizontally
This time I will show you how to use li to arrange horizontally, and what are the precautions for using li to arrange horizontally. The following is a practical case, let's take a look.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>li水平排列</title>
<style>
html{
font-size: 20px;
}
@media only screen and (min-width: 320px){
html{font-size: 20px !important;}
}
@media only screen and (min-width: 350px){
html{font-size: 22.5px !important;}
}
@media only screen and (min-width: 365px){
html{font-size: 23px !important;}
}
@media only screen and (min-width: 375px){
html{font-size: 23.5px !important;}
}
@media only screen and (min-width: 390px){
html{font-size: 24.5px !important;}
}
@media only screen and (min-width: 400px){
html{font-size: 25px !important;}
}
@media only screen and (min-width: 428px){
html{font-size: 26.8px !important;}
}
@media only screen and (min-width: 432px){
html{font-size: 27.4px !important;}
}
@media only screen and (min-width: 481px){
html{font-size: 30px !important;}
}
@media only screen and (min-width: 569px){
html{font-size: 35px !important;}
}
@media only screen and (min-width: 569px){
html{font-size: 40px !important;}
}
body{
margin: 0;
padding: 0;
}
ul{
width: 100%;
margin: 0.3rem 0;
padding:0.3rem 0;
border-top:0.05rem solid #ccc;
border-bottom: 0.05rem solid #ccc;
}
li{
width: 33%;
list-style-type: none;
display:inline-block;
font-size: 0.8rem;
border-left: 0.05rem solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
</ul>
</body>
</html>
##There will be a problem in this case. Set the width of li to 33%. The width of the three li tags actually exceeds one line. One obvious thing is that the li tag has a little more white space.
1. FloatingThe first thing that comes to mind is floating. Add the style float:left to li.
The effect is as above. In this way, there will be a problem with floating, that is, the floating of li makes the height of ul 0. To solve this problem, there are three Method:
1. Add height to ul, but this cannot be adaptive.
2. Be clear about the impact of floating. Add an empty p after the last li tag,
(Personally recommended, but I feel that the code maintenance is not very good. OK.)
3. Add the zoom attribute to UL, which seems to be only suitable for IE (I haven’t researched it).
< ;ul>
It’s strange why this is normal, it’s hard to understand for the time being.
##3. Add styles to ul and remove the white space between li tags
Adding font-size:0 style to ul can remove the space between li tags. Something to note is that you need to reset the font size of the li tag.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! 
Recommended reading:
How to use the penetration and point penetration of the Zepto tap event (With code)
The above is the detailed content of How to use li to arrange horizontally. For more information, please follow other related articles on the PHP Chinese website!