フッターの途中でフッター要素を取得するにはどうすればよいですか？

Question

私はページの中央にフッタの3つの要素を取得しようとしましたが、もう一度4番目の要素を追加するとどのように動作するのか分かりません。

これは私のHTMLとCSSのコードです：

footer { 
 
\t width: 100%; 
 
\t background-color: #333; 
 
\t display: table; 
 
} 
 

 
/* Finanzdienstleistungen */ 
 

 
.finanzdienstleistungenfooter { 
 
\t display: table-cell; 
 
\t list-style: none; 
 
\t padding-left: 50px; 
 
} 
 

 
.finanzdienstleistungenfooter li h1 { 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t font-size: 16px; 
 
\t padding-bottom: 5px; 
 
} 
 

 
.finanzdienstleistungenfooter li a { 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t color: rgba(106,106,106,1.00); 
 
\t font-size: 14px; 
 
} 
 

 
/* Vermietung */ 
 

 
.vermietungfooter { 
 
\t display: table-cell; 
 
\t list-style: none; 
 
\t padding-left: 50px; 
 
} 
 

 
.vermietungfooter li h1 { 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t font-size: 16px; 
 
\t padding-bottom: 5px; 
 
} 
 

 
.vermietungfooter li a { 
 
\t text-decoration: none; 
 
\t color: rgba(106,106,106,1.00); 
 
\t font-size: 14px; 
 
} 
 

 
/* Über uns */ 
 

 
.ueberunsfooter { 
 
\t display: table-cell; 
 
\t list-style: none; 
 
\t padding-left: 50px; 
 
} 
 

 
.ueberunsfooter li h1 { 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t font-size: 16px; 
 
\t padding-bottom: 5px; 
 
} 
 

 
.ueberunsfooter li a { 
 
\t text-decoration: none; 
 
\t color: rgba(106,106,106,1.00); 
 
\t font-size: 14px; 
 
}

<footer> 
 
     <ul> 
 
      <li> 
 
       <ul class="finanzdienstleistungenfooter"> 
 
        <li><a href="finanzdienstleistungen.php"><h1>Finanzdienstleistungen</h1></a></li> 
 
        <li><a href="#">Versicherungen</a></li> 
 
        <li><a href="#">Schadensabwickelung</a></li>  
 
       </ul> 
 
       <ul class="vermietungfooter"> 
 
        <li><a href="vermietung.php"><h1>Vermietung</h1></a></li> 
 
        <li><a href="#">Freie Wohnungen</a></li> 
 
        <li><a href="#">Alle Wohnungen</a></li> 
 
       </ul> 
 
       <ul class="ueberunsfooter"> 
 
        <li><a href="#"><h1>Über uns</h1></a></li> 
 
        <li><a href="impressum.php">Impressum</a></li> 
 
        <li><a href="#">Kontakt</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </footer>

Answer 1

を適用する私は、周囲のul要素にマージンや位置を追加しました：

footer { 
 
    width: 100%; 
 
    background-color: #333; 
 
    display: table; 
 
} 
 
.top-list { 
 
    display:inherit !important; 
 
    margin:0 auto !important; 
 
} 
 
/* Finanzdienstleistungen */ 
 

 
.finanzdienstleistungenfooter { 
 
    display: table-cell; 
 
    list-style: none; 
 
    padding-left: 50px; 
 
} 
 

 
.finanzdienstleistungenfooter li h1 { 
 
    text-decoration: none; 
 
    color: black; 
 
    font-size: 16px; 
 
    padding-bottom: 5px; 
 
} 
 

 
.finanzdienstleistungenfooter li a { 
 
    text-decoration: none; 
 
    color: black; 
 
    color: rgba(106,106,106,1.00); 
 
    font-size: 14px; 
 
} 
 

 
/* Vermietung */ 
 

 
.vermietungfooter { 
 
    display: table-cell; 
 
    list-style: none; 
 
    padding-left: 50px; 
 
} 
 

 
.vermietungfooter li h1 { 
 
    text-decoration: none; 
 
    color: black; 
 
    font-size: 16px; 
 
    padding-bottom: 5px; 
 
} 
 

 
.vermietungfooter li a { 
 
    text-decoration: none; 
 
    color: rgba(106,106,106,1.00); 
 
    font-size: 14px; 
 
} 
 

 
/* Über uns */ 
 

 
.ueberunsfooter { 
 
    display: table-cell; 
 
    list-style: none; 
 
    padding-left: 50px; 
 
}

<footer> 
 
     <ul class="top-list"> 
 
      <li> 
 
       <ul class="finanzdienstleistungenfooter"> 
 
        <li><a href="finanzdienstleistungen.php"><h1>Finanzdienstleistungen</h1></a></li> 
 
        <li><a href="#">Versicherungen</a></li> 
 
        <li><a href="#">Schadensabwickelung</a></li>  
 
       </ul> 
 
       <ul class="vermietungfooter"> 
 
        <li><a href="vermietung.php"><h1>Vermietung</h1></a></li> 
 
        <li><a href="#">Freie Wohnungen</a></li> 
 
        <li><a href="#">Alle Wohnungen</a></li> 
 
       </ul> 
 
       <ul class="ueberunsfooter"> 
 
        <li><a href="#"><h1>Über uns</h1></a></li> 
 
        <li><a href="impressum.php">Impressum</a></li> 
 
        <li><a href="#">Kontakt</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </footer>

Answer 2

がexのために、フッターの後にコンテナを追加します。

、単純なCSS

.footer-container{ 
width:1200px; 
margin:auto; 
} 

Answer 3

をあなたは物事を複雑にかけ、完全にされています。 display: table-cellを使用する代わりに、display: inline-blockを使用して、トップレベルulを削除し、フッタにtext-align: centerを追加します。

footer { 
 
    font-size: 16px; 
 
    background-color: #333; 
 
    text-align: center; 
 
} 
 

 
footer a { 
 
    text-decoration: none; 
 
    color: rgba(106, 106, 106, 1.00); 
 
    font-size: 16px; 
 
} 
 

 
footer ul { 
 
    text-align: left; 
 
    list-style: none; 
 
    display: inline-block; 
 
    padding: 15px; 
 
} 
 

 
footer h1 { 
 
    font-size: 16px; 
 
    color: black; 
 
    margin: 0; 
 
}

<footer> 
 
    <ul> 
 
    <li> 
 
     <a href="finanzdienstleistungen.php"> 
 
     <h1>Finanzdienstleistungen</h1> 
 
     </a> 
 
    </li> 
 
    <li><a href="#">Versicherungen</a></li> 
 
    <li><a href="#">Schadensabwickelung</a></li> 
 
    </ul> 
 
    <ul> 
 
    <li> 
 
     <a href="vermietung.php"> 
 
     <h1>Vermietung</h1> 
 
     </a> 
 
    </li> 
 
    <li><a href="#">Freie Wohnungen</a></li> 
 
    <li><a href="#">Alle Wohnungen</a></li> 
 
    </ul> 
 
    <ul> 
 
    <li> 
 
     <a href="#"> 
 
     <h1>Über uns</h1> 
 
     </a> 
 
    </li> 
 
    <li><a href="impressum.php">Impressum</a></li> 
 
    <li><a href="#">Kontakt</a></li> 
 
    </ul> 
 
</footer>

Answer 4

これを使用してみてください。あなたの要件に応じて3つまたは4つのセクションを追加することができます。あなたのコンテンツは常に中央揃えになります。それがあなたを助けることを願っています。

footer { 
 
    width: 100%; 
 
    background-color: #333; 
 
    padding: 20px 0; 
 
} 
 

 
footer > ul { 
 
    padding-left: 0; 
 
} 
 

 
footer > ul > li { 
 
    display: table; 
 
    list-style-type: none; 
 
    table-layout: fixed; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
footer li { 
 
    list-style-type: none; 
 
} 
 

 
.finanzdienstleistungenfooter, 
 
.vermietungfooter, 
 
.ueberunsfooter { 
 
\t display: table-cell; 
 
\t list-style: none; 
 
    padding-left: 0; 
 
} 
 

 
.finanzdienstleistungenfooter li h1, 
 
.vermietungfooter li h1, 
 
.ueberunsfooter li h1 { 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t font-size: 16px; 
 
\t padding-bottom: 5px; 
 
} 
 

 
.finanzdienstleistungenfooter li a, 
 
.vermietungfooter li a, 
 
.ueberunsfooter li a { 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t color: rgba(106,106,106,1.00); 
 
\t font-size: 14px; 
 
}

<footer> 
 
    <ul> 
 
     <li> 
 
      <ul class="finanzdienstleistungenfooter"> 
 
       <li><a href="finanzdienstleistungen.php"><h1>Finanzdienstleistungen</h1></a></li> 
 
       <li><a href="#">Versicherungen</a></li> 
 
       <li><a href="#">Schadensabwickelung</a></li>  
 
      </ul> 
 
      <ul class="vermietungfooter"> 
 
       <li><a href="vermietung.php"><h1>Vermietung</h1></a></li> 
 
       <li><a href="#">Freie Wohnungen</a></li> 
 
       <li><a href="#">Alle Wohnungen</a></li> 
 
      </ul> 
 
      <ul class="ueberunsfooter"> 
 
       <li><a href="#"><h1>Über uns</h1></a></li> 
 
       <li><a href="impressum.php">Impressum</a></li> 
 
       <li><a href="#">Kontakt</a></li> 
 
      </ul> 
 
      <ul class="ueberunsfooter"> 
 
       <li><a href="#"><h1>Über uns</h1></a></li> 
 
       <li><a href="impressum.php">Impressum</a></li> 
 
       <li><a href="#">Kontakt</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</footer>