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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1655
14
1414
52
1307
25
1253
29
1227
24
Do I need to use flexbox in the center of the Bootstrap picture?
Apr 07, 2025 am 09:06 AM
There are many ways to center Bootstrap pictures, and you don’t have to use Flexbox. If you only need to center horizontally, the text-center class is enough; if you need to center vertically or multiple elements, Flexbox or Grid is more suitable. Flexbox is less compatible and may increase complexity, while Grid is more powerful and has a higher learning cost. When choosing a method, you should weigh the pros and cons and choose the most suitable method according to your needs and preferences.
Top 10 cryptocurrency trading platforms, top ten recommended currency trading platform apps
Mar 17, 2025 pm 06:03 PM
The top ten cryptocurrency trading platforms include: 1. OKX, 2. Binance, 3. Gate.io, 4. Kraken, 5. Huobi, 6. Coinbase, 7. KuCoin, 8. Crypto.com, 9. Bitfinex, 10. Gemini. Security, liquidity, handling fees, currency selection, user interface and customer support should be considered when choosing a platform.
Top 10 virtual currency trading platforms 2025 cryptocurrency trading apps ranking top ten
Mar 17, 2025 pm 05:54 PM
Top Ten Virtual Currency Trading Platforms 2025: 1. OKX, 2. Binance, 3. Gate.io, 4. Kraken, 5. Huobi, 6. Coinbase, 7. KuCoin, 8. Crypto.com, 9. Bitfinex, 10. Gemini. Security, liquidity, handling fees, currency selection, user interface and customer support should be considered when choosing a platform.
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
How to calculate c-subscript 3 subscript 5 c-subscript 3 subscript 5 algorithm tutorial
Apr 03, 2025 pm 10:33 PM
The calculation of C35 is essentially combinatorial mathematics, representing the number of combinations selected from 3 of 5 elements. The calculation formula is C53 = 5! / (3! * 2!), which can be directly calculated by loops to improve efficiency and avoid overflow. In addition, understanding the nature of combinations and mastering efficient calculation methods is crucial to solving many problems in the fields of probability statistics, cryptography, algorithm design, etc.
What are the safe and reliable digital currency platforms?
Mar 17, 2025 pm 05:42 PM
A safe and reliable digital currency platform: 1. OKX, 2. Binance, 3. Gate.io, 4. Kraken, 5. Huobi, 6. Coinbase, 7. KuCoin, 8. Crypto.com, 9. Bitfinex, 10. Gemini. Security, liquidity, handling fees, currency selection, user interface and customer support should be considered when choosing a platform.
How to elegantly solve the problem of too small spacing of Span tags after a line break?
Apr 05, 2025 pm 06:00 PM
How to elegantly handle the spacing of Span tags after a new line In web page layout, you often encounter the need to arrange multiple spans horizontally...
Recommended safe virtual currency software apps Top 10 digital currency trading apps ranking 2025
Mar 17, 2025 pm 05:48 PM
Recommended safe virtual currency software apps: 1. OKX, 2. Binance, 3. Gate.io, 4. Kraken, 5. Huobi, 6. Coinbase, 7. KuCoin, 8. Crypto.com, 9. Bitfinex, 10. Gemini. Security, liquidity, handling fees, currency selection, user interface and customer support should be considered when choosing a platform.
