如何使这些图标排成一行并留有空格?无法理解为什么他们不会自动连续出现... 希望他们排成一排,周围并居中放置空间。如果它们在小于768像素时也可以堆叠,那将是很棒的。 我在这里想念什么?
<footer>
<div class="credit">
<p>2018 Roger Jorns</p>
</div>
<div class="footer-logo">
<img class="footer-pic" src="/Users/rogerjorns/Desktop/Portfolio/food site/assets/images/LogoMakr_1KiQWa.png" alt="">
</div>
<div class="social">
<ul class="icons">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-yelp"></i></li>
</ul>
</div>
</footer>
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 1fr;
width: 100%;
background-color: gray;
}
li {
list-style: none;
}
.credit {
grid-column: 1;
display: flex;
justify-content: center;
align-items: center;
}
.footer-logo {
grid-column: 2;
width: 40%;
margin: 0 auto;
}
.social {
grid-column: 3;
display: flex;
justify-content: center;
align-items: center;
}
答案 0 :(得分:1)
它们之所以不会出现在行中,是因为list-items
或<li>
元素的默认display
属性为:display: list-item
。使用flexbox
将它们显示为一行并在周围留有空格。
footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 1fr;
width: 100%;
background-color: gray;
}
li {
list-style: none;
}
.credit {
grid-column: 1;
display: flex;
justify-content: center;
align-items: center;
}
.footer-logo {
grid-column: 2;
width: 40%;
margin: 0 auto;
}
.social {
grid-column: 3;
display: flex;
justify-content: center;
align-items: center;
}
ul {
display: flex;
justify-content: space-around;
width: 100%;
}
@media only screen and (max-width: 600px) {
ul {
display: initial;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/brands.css" integrity="sha384-nT8r1Kzllf71iZl81CdFzObMsaLOhqBU1JD2+XoAALbdtWaXDOlWOZTR4v1ktjPE" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous">
<footer>
<div class="credit">
<p>2018 Roger Jorns</p>
</div>
<div class="footer-logo">
<img class="footer-pic" src="/Users/rogerjorns/Desktop/Portfolio/food site/assets/images/LogoMakr_1KiQWa.png" alt="">
</div>
<div class="social">
<ul class="icons">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-yelp"></i></li>
</ul>
</div>
</footer>
如果要在设备小于786px时堆叠图标,请使用media-queries
禁用flex-box
。
答案 1 :(得分:1)
flex属性必须定位到直接父容器元素,该元素不是.social
而是.icons
。