如何在页脚中间放置页脚元素？

时间：2017-03-23 14:22:32

标签： html css

我试图将页脚的这三个元素放到页面中间，但我不知道如果我添加另一个第四个元素，我不需要再次编辑所有填充，它是如何工作的。

这是我的HTML和CSS代码：

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

/* 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;
}

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

.ueberunsfooter li a {
	text-decoration: none;
	color: rgba(106,106,106,1.00);
	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>

4 个答案:

答案 0 :(得分：0)

在页脚之后添加一个容器，例如

然后应用一个简单的CSS 

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

答案 1 :(得分：0)

我在周围的ul元素中添加了一个边距和位置：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你完全过分复杂了。不要使用v6.10.1使用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;
}

答案 3 :(得分：0)

尝试使用此功能。您可以根据需要添加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 {
	display: table-cell;
	list-style: none;
    padding-left: 0;
}

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

.finanzdienstleistungenfooter li a,
.vermietungfooter li a,
.ueberunsfooter li a {
	text-decoration: none;
	color: black;
	color: rgba(106,106,106,1.00);
	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>

相关问题
最新问题