Wie schreibe ich CSS-Left-Float?-CSS-Tutorial-php.cn

Wie schreibe ich CSS-Left-Float?

青灯夜游

Freigeben： 2019-06-03 15:07:43

Original

10128 Leute haben es durchsucht

Wie schreibe ich CSS-Left-Float?

In CSS können Sie das Float-Attribut verwenden, um die Richtung zu definieren, in die das Element schwebt. Wenn Sie nach links schweben möchten, müssen Sie nur den Wert des Float-Attributs festlegen das Element nach links (float:left). Lassen Sie mich Ihnen das Float-Attribut vorstellen. Ich hoffe, es wird Ihnen hilfreich sein.

CSS-Float-Attribut

Das Float-Attribut gibt an, ob und in welche Richtung eine Box (Element) schweben soll. Ein schwebendes Element erstellt eine Box auf Blockebene, unabhängig von der Art des Elements.

Hinweis: Absolut positionierte Elemente ignorieren das Float-Attribut!

Syntax:

float: left|right|none|inherit;

Nach dem Login kopieren

Attributwert:

left: Das Element schwebt nach links.

rechts: Das Element schwebt nach rechts.

keine: Standardwert. Das Element ist nicht schwebend und erscheint dort, wo es im Text erscheint.

inherit: Gibt an, dass der Wert des Float-Attributs vom übergeordneten Element geerbt werden soll.

Beispiel: Stellen Sie das Element so ein, dass es nach links schwebt, und erstellen Sie ein horizontales Menü

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</body>
</html>

Nach dem Login kopieren

Rendering:

Wie schreibe ich CSS-Left-Float?

Im obigen Beispiel lassen wir das ul-Element und das Element nach links schweben. Das li-Element erscheint als Inline-Element (keine Zeilenumbrüche vor oder nach dem Element), wodurch die Liste gezwungen wird, eine Zeile zu sein.

100 % der Breite des ul-Elements und 6 em (6-fache aktuelle Schriftgröße) jeder Hyperlink-Liste. Wir haben auch einige Farben und Ränder hinzugefügt, um es hochwertiger zu machen.

Das obige ist der detaillierte Inhalt vonWie schreibe ich CSS-Left-Float?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!