Comment utiliser Li pour organiser horizontalement-Tutoriel H5-php.cn

Comment utiliser Li pour organiser horizontalement

php中世界最好的语言

Libérer： 2018-06-04 11:38:40

original

10634 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser li pour organiser horizontalement, et quelles sont les précautions pour utiliser li pour organiser horizontalement. Ce qui suit est un cas pratique, jetons un coup d'oeil.

<!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>

Copier après la connexion

Il y a un problème avec la définition de la largeur de li à 33 %. La largeur des trois balises li dépasse en fait. Une ligne, une chose évidente est que la balise li a un peu plus d'espace vide.

1. Flottant

La première chose qui me vient à l'esprit est flottante, ajoutez le style float:left à li.

L'effet est comme ci-dessus, de cette façon, le flottement aura un problème, c'est-à-dire que le flottement de li fait que la hauteur de ul soit. 0. Il existe trois façons de résoudre ce problème. Méthode :

1. Augmentez la hauteur de ul, mais cela ne peut pas être adaptatif.

2. Soyez clair sur l'impact du flottement et ajoutez un p vide après la dernière balise li,

la maintenance n'est pas très bonne. D'accord. )

3. Ajoutez l'attribut zoom à ul, qui semble ne convenir que pour ie (je ne l'ai pas recherché).

2. Écrivez la balise li sur une seule ligne

< ;ul>

Je suis le premierli

Je suis le deuxièmeli

Je suis le troisièmeli

C'est étrange pourquoi c'est normal, c'est difficile à comprendre pour le moment.

3. Ajoutez des styles à ul et supprimez l'espace blanc entre les balises li

Ajoutez le style font-size:0 à ul pour supprimer l'espace entre les balises li. Une chose à noter est que vous devez réinitialiser la taille de la police de la balise li.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Comment utiliser la méthode javascript Date Format

Comment utiliser la pénétration et la pénétration ponctuelle de l'événement Zepto Tap (Avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!