Heim > Artikel > Web-Frontend > So verwenden Sie li zum horizontalen Anordnen

So verwenden Sie li zum horizontalen Anordnen

php中世界最好的语言Original: 2018-06-04 11:38:4010591Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie li zum horizontalen Anordnen verwenden und welche Vorsichtsmaßnahmen für die Verwendung von li zum horizontalen Anordnen gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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

Es gibt ein Problem beim Festlegen der Breite von li auf 33 %. Die Breite der drei li-Tags überschreitet tatsächlich eine Zeile . Eine offensichtliche Sache ist, dass das li-Tag etwas mehr Leerraum hat.

1. Floating

Das erste, was mir in den Sinn kommt, ist Floating. Fügen Sie den Stil float:left zu li hinzu.

Der Effekt ist wie oben. Auf diese Weise wird das Schweben ein Problem haben, das heißt, das Schweben von li führt zu einer Höhe von ul 0. Es gibt drei Möglichkeiten, dieses Problem zu lösen:

1 Erhöhen Sie die Höhe von ul, aber dies kann nicht adaptiv sein.

2. Machen Sie sich klar, welche Auswirkungen das Floating hat, und fügen Sie nach dem letzten li-Tag ein leeres p hinzu,

Wartung ist nicht sehr gut.

3. Fügen Sie das Zoom-Attribut zu ul hinzu, das nur für IE geeignet zu sein scheint (ich habe es nicht recherchiert).

2. Schreiben Sie den li-Tag in eine Zeile

< ;ul>

Ich bin der Ersteli

Ich bin der Zweiteli

Ich bin der Dritteli

Es ist seltsam, warum das normal ist, es ist im Moment schwer zu verstehen.

3. Fügen Sie Stile zu ul hinzu und entfernen Sie den Leerraum zwischen li-Tags

Fügen Sie den Stil „font-size:0“ zu ul hinzu, um das Leerzeichen zwischen li-Tags zu entfernen. Beachten Sie, dass Sie die Schriftgröße des li-Tags zurücksetzen müssen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

So verwenden Sie die Javascript-Datumsformatmethode

So verwenden Sie die Penetration und Punktpenetration von das Zepto-Tap-Ereignis (mit Code)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie li zum horizontalen Anordnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung häufig verwendeter -CodesNächster Artikel：Zusammenfassung häufig verwendeter -Codes

In Verbindung stehende Artikel

Mehr sehen