我有一个页脚,并希望我的列表项与h3对齐。有办法吗?现在公司,社交和其他公司比剩下的要多一些。我已经输入了justify-content: center
,但标题似乎与列表项的中心不同。希望有人能帮助我
<footer>
<div class="footer-items">
<div class="footer-column">
<h3 class="company">Company</h3>
<ul>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="about.html">Über Uns</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div class="footer-column">
<h3 class="social">Social</h3>
<ul>
<li><a>Twitter</a></li>
<li><a>Instagram</a></li>
<li><a>Reddit</a></li>
</ul>
</div>
<div class="footer-column">
<h3 class="other">other</h3>
<ul>
<li><a>other1</a></li>
<li><a>other2</a></li>
</ul>
</div>
</div>
footer{
width: 100%; /*breite: 100%*/
padding: 0;
margin: 0;
background-color: #5490dd; /*Hintergrundfarbe*/
}
.footer-items{
width: 80%;
margin: auto;
display: flex; /*bringt alle Teile in eine Linie*/
}
.footer-column{
z-index: 2;
width: 33.33%; /*drittelt den Platz im footer*/
text-align: center;
}
.footer-column ul{
list-style: none; /*entfernt Anstriche*/
}
.footer-column ul li {
margin: 0;
padding-top: 5px;
}
.footer-column ul li a{
text-decoration: none; /*entfernt das die Links unterstrichen sind*/
color: rgb(230, 230, 230);
list-style: none;
}
为什么您需要没有样式的ul
li
? Aslo ul
具有其默认值,也许您不想使用它。使用div
。
查看摘要。
我在padding-bottom
和.footer-column
中将ul
添加到li
并将div
html
更改为css
如果您想左对齐-移除text-align: center;
footer {
width: 100%;
/*breite: 100%*/
padding: 0;
margin: 0;
background-color: #5490dd;
/*Hintergrundfarbe*/
}
.footer-items {
width: 80%;
margin: auto;
display: flex;
/*bringt alle Teile in eine Linie*/
}
.footer-column {
z-index: 2;
width: 33.33%;
/*drittelt den Platz im footer*/
/*text-align: center;*/
padding-bottom: 16px;
}
.footer-column div {
margin: 0;
padding-top: 5px;
}
.footer-column div a {
text-decoration: none;
/*entfernt das die Links unterstrichen sind*/
color: rgb(230, 230, 230);
list-style: none;
}
<footer>
<div class="footer-items">
<div class="footer-column">
<h3 class="company">Company</h3>
<div><a href="kontakt.html">Kontakt</a></div>
<div><a href="about.html">Über Uns</a></div>
<div><a href="impressum.html">Impressum</a></div>
</div>
<div class="footer-column">
<h3 class="social">Social</h3>
<div><a>Twitter</a></div>
<div><a>Instagram</a></div>
<div><a>Reddit</a></div>
</div>
<div class="footer-column">
<h3 class="other">other</h3>
<div><a>other1</a></div>
<div><a>other2</a></div>
</div>
</div>