Wie stelle ich das Float-Center in CSS ein?
Im float-Attribut von CSS schwebt float:right nach rechts und float:left nach links, aber das zentrierte Attribut ist nicht festgelegt. Was sollen wir also tun, wenn wir das float-Attribut zentrieren möchten? In diesem Artikel erfahren Sie, wie Sie das Float-Attribut in CSS zentrieren.
Bei der Erstellung von Navigationsleisten verwenden wir häufig die schwebende Zentrierung. Jetzt werden wir die schwebende Zentrierung von Navigationsleisten verwenden, um Ihnen die Methode der schwebenden Zentrierung in CSS vorzustellen. (Verwandte Empfehlungen: Wie verwende ich das Float-Attribut in CSS?)
So zentrieren Sie Float in CSS: Verwenden Sie display:inline-block und float:left
Sehen wir uns den spezifischen Beispielcode für die Float-Zentrierung an:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
text-align:center;
}
li {
float:left;
font-size:12px;
}
a {
float:left;
border:1px solid #000;
padding:5px 10px;
text-decoration:none;
color:#000;
}
ul {
display:inline-block;
*display:inline;
zoom:1;
}
</style>
</head>
<body>
<ul>
<li><a href="#nogo">首页</a></li>
<li><a href="#nogo">视频</a></li>
<li><a href="#nogo">文章</a></li>
<li><a href="#nogo">登录</a></li>
<li><a href="#nogo">留言</a></li>
</ul>
</body>
</html>Die Wirkung der Float-Zentrierung ist wie folgt:
In Bezug auf den obigen Code sehen wir ein *display:inline;, das eigentlich eine CSS-Hack-Schreibmethode ist (falls Sie die CSS-Hack-Schreibmethode nicht kennen). , Sie können es selbst auf Baidu suchen) *{margin: 0;padding: 0;} ist in der Vergangenheit ein üblicher „Reset“-Stil, was bedeutet, dass alle Elemente auf der Webseite eng miteinander verbunden sind, weil sie unterschiedlich sind Browser erzeugen unterschiedliche Standardelementstile, daher *{ margin: 0; padding: 0;} Der Hauptzweck besteht darin, Ihnen beim Zurücksetzen der Standardstile verschiedener Browser zu helfen, damit die Ergebnisse verschiedener Browser bei der Anzeige von Webseiten nicht zu unterschiedlich sind .
Nachdem Sie die oben genannten Methoden gelesen haben, denken Sie möglicherweise manchmal nicht daran, CSS-Hack zum Schreiben zu verwenden, und die Kompatibilität ist nicht gut
Werfen wir also einen Blick auf die Implementierungsmethode ohne *display :inline;
Codebeispiel zum Festlegen der Float-Zentrierung in CSS (ohne Verwendung von *display:inline;):
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.xlk-nav {
width: 100%;
height: 40px;
text-align: center;
background-color: lightblue;
}
.xlk-menu {
height: 100%;
float: left;
line-height: 40px;
padding: 0 20px;
margin-right: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div class="xlk-nav">
<div style="display: inline-block;">
<div class="xlk-menu">首页</div>
<div class="xlk-menu">视频</div>
<div class="xlk-menu">文章</div>
<div class="xlk-menu">登录</div>
<div class="xlk-menu">留言</div>
</div>
</div>
</body>
</html>Der Zentrierungseffekt ist wie folgt:
Das obige ist der detaillierte Inhalt vonWie stelle ich das Float-Center in CSS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Was ist der maximale Float-Wert?
Oct 11, 2023 pm 05:54 PM
Maximaler Wert von Float: 1. In der C-Sprache beträgt der maximale Wert von Float 3,40282347e+38. Gemäß dem IEEE 754-Standard beträgt der maximale Exponent des Float-Typs 127 und die Anzahl der Stellen der Mantisse beträgt 23. Auf diese Weise beträgt die maximale Gleitkommazahl 3,40282347 e+38 2. In der Java-Sprache beträgt der maximale Gleitkommawert 3,4028235E+38; in der Python-Sprache beträgt der maximale Gleitkommawert 1,7976931348623157e+308.
Was sind die Float-Längen der Datenbank?
Oct 10, 2023 pm 03:57 PM
Übliche Datenbank-Float-Längen sind: 1. Die Float-Typ-Länge in MySQL kann 4 Bytes oder 8 Bytes betragen. 2. Die Float-Typ-Länge in Oracle kann 4 Bytes oder 8 Bytes betragen. 3. Die Länge des Float-Typs in SQL Server ist auf 8 Bytes festgelegt. 4. Die Länge des Float-Typs in PostgreSQL kann 4 Bytes oder 8 Bytes usw. betragen.
Wie hoch ist die Genauigkeit des Floats?
Oct 17, 2023 pm 03:13 PM
Die Genauigkeit von Float kann 6 bis 9 Dezimalstellen erreichen. Gemäß dem IEEE754-Standard beträgt die Anzahl der signifikanten Ziffern, die der Float-Typ darstellen kann, etwa 6 bis 9 Ziffern. Es ist zu beachten, dass dies nur die theoretische maximale Genauigkeit ist. Aufgrund des Rundungsfehlers von Gleitkommazahlen ist die Genauigkeit des Gleitkommatyps häufig geringer. Bei der Ausführung von Gleitkommazahlenoperationen in einem Computer kann es aufgrund der Genauigkeitsbeschränkungen von Gleitkommazahlen zu Präzisionsverlusten kommen. Um die Genauigkeit von Gleitkommazahlen zu verbessern, können Sie Datentypen mit höherer Genauigkeit verwenden, z. B. Double oder Long Double.
Was bedeutet Float in der C-Sprache?
Oct 12, 2023 pm 02:30 PM
Float ist in der Sprache C ein Datentyp, der zur Darstellung von Gleitkommazahlen mit einfacher Genauigkeit verwendet wird. Gleitkommazahlen sind reelle Zahlen, die in wissenschaftlicher Notation dargestellt werden und sehr große oder sehr kleine Werte darstellen können. Variablen vom Typ float können Werte mit 6 signifikanten Stellen nach dem Dezimalpunkt speichern. In der Sprache C kann der Typ float zum Betreiben und Speichern von Gleitkommazahlen verwendet werden. Seine Variablen können zur Darstellung von Dezimalzahlen, Brüchen und wissenschaftlicher Notation verwendet werden usw., die genau dargestellt werden müssen. Im Gegensatz zu Ganzzahltypen können Gleitkommazahlen Zahlen nach dem Komma darstellen und vier arithmetische Operationen mit Dezimalzahlen ausführen.
So konvertieren Sie einen String in einen Float
Oct 16, 2023 pm 02:03 PM
Kann über Python, JavaScript, Java, C#, Ruby und PHP in Float konvertiert werden. Detaillierte Einführung: 1. Python, geben Sie float_number = float(string_number); ein. 2. JavaScript, geben Sie float_number = parseFloat(string_number); ein.
Welche Werte hat das Float-Attribut?
Oct 10, 2023 pm 02:03 PM
Zu den Float-Attributwerten gehören left, right, none, inherit, clearinline-start und inline-end. Detaillierte Einführung: 1. links, das Element schwebt nach links, das heißt, das Element befindet sich so nah wie möglich an der linken Seite des Containers und andere Elemente umgeben es auf der rechten Seite. 2. rechts, das Element schwebt nach rechts, das heißt, das Element befindet sich so nah wie möglich am Container. Auf der rechten Seite werden andere Elemente es auf der linken Seite umgeben. 3. Der Standardwert ist „Keine“, die Elemente schweben nicht und werden angeordnet entsprechend dem normalen Dokumentenfluss usw.
Was ist der Unterschied zwischen Float und Double?
Oct 11, 2023 pm 05:38 PM
Die Hauptunterschiede zwischen Float und Double liegen in der Genauigkeit, Speicher- und Berechnungsgeschwindigkeit, Reichweite und Verwendung in Programmiersprachen. Detaillierte Einführung: 1. Die Genauigkeit ist unterschiedlich. Float ist eine Gleitkommazahl mit einfacher Genauigkeit und belegt 4 Bytes (32 Bit), während Double eine Gleitkommazahl mit doppelter Genauigkeit ist und 8 Bytes (64 Bits) belegt Speicher- und Berechnungsgeschwindigkeit sind unterschiedlich. Double nimmt mehr Platz ein und erfordert mehr Speicherplatz zum Speichern von Werten. Bei Anwendungen, die eine hohe Leistung und Geschwindigkeit erfordern, ist es möglicherweise effizienter, den Float-Typ zu verwenden.
Was beinhalten float32-Bytes?
Oct 10, 2023 pm 04:07 PM
Das float32-Byte enthält das Vorzeichenbit, das Exponentenbit und das Mantissenbit und wird zur Darstellung von 32-Bit-Gleitkommazahlen verwendet. Detaillierte Einführung: 1. Vorzeichenbit (1 Bit), das zur Darstellung des Vorzeichens einer Zahl verwendet wird, 0 stellt eine positive Zahl dar, 1 stellt eine negative Zahl dar. 2. Exponentenbit (8 Bit), das zur Darstellung des Exponententeils von a verwendet wird Gleitkommazahl, über das Exponentenbit können Sie den Größenbereich der Gleitkommazahl 3 anpassen. Das Mantissenbit (23 Bit) wird verwendet, um den Mantissenteil der Gleitkommazahl darzustellen, und das Mantissenbit speichert der Dezimalteil der Gleitkommazahl. Das Vorzeichenbit bestimmt das Vorzeichen einer Gleitkommazahl, und das Exponentenbit und das Mantissenbit bestimmen gemeinsam die Größe und Genauigkeit der Gleitkommazahl.
