Heim > Artikel > Web-Frontend > Stellen Sie kurz die Methode zur Implementierung eines einspaltigen Layouts und eines horizontalen Mittenlayouts mithilfe von HTML + CSS vor

Stellen Sie kurz die Methode zur Implementierung eines einspaltigen Layouts und eines horizontalen Mittenlayouts mithilfe von HTML + CSS vor

巴扎黑Original: 2017-09-07 09:32:421745Durchsuche

Dieser Artikel stellt hauptsächlich die relevanten Informationen zu HTML+CSS vor, um ein einspaltiges Layout und ein horizontal zentriertes Layout zu realisieren. Freunde, die es benötigen, können sich auf

Horizontal zentriertes Layout

beziehen

Übergeordnetes Element text-align:center; Untergeordnetes Element: inline-block;
Vorteile: Gute Kompatibilität;
Nachteile: Sie müssen sowohl das untergeordnete Element als auch das übergeordnete Element festlegen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中布局</title>
<style>
    *{
      margin: 0;
      padding: 0;
    }
    .parent {
        width: 100%;
        background: green;
        text-align: center;
    }
    .child {
        display: inline-block;
        width: 800px;
        height: 100px;
        background: blue;
    }
</style>
</head>
<body>
<p class="parent">
    <p class="child">1</p>
    <p class="child">2</p>
    <p class="child">3</p>
    <p class="child">4</p>
    <p class="child">5</p>
    <p class="child">6</p>
</p>
</body>
</html>

Das obige ist der detaillierte Inhalt vonStellen Sie kurz die Methode zur Implementierung eines einspaltigen Layouts und eines horizontalen Mittenlayouts mithilfe von HTML + CSS vor. 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：Ausführliche Erklärung, wie man einen 0,5-Pixel-Rahmen mit CSS implementiertNächster Artikel：Ausführliche Erklärung, wie man einen 0,5-Pixel-Rahmen mit CSS implementiert

In Verbindung stehende Artikel

Mehr sehen