我正在嘗試使用 Flexbox 為我的網站布局頁腳。<h4>有兩列，每列具有相同數量的項目，但一列由標簽中的文本和標簽中的其他鏈接填充<a>。它們在垂直軸上的間距不同，我不明白為什么。為了清晰起見，我添加了一些背景顏色。我缺少什么？.footer { font-family: 'nexa_light', sans-serif; font-style: normal; background-color: #003152; color: white;}.footer-container { background-color: red; width: 90%; margin-left: auto; margin-right: auto; padding-top: 25px; padding-left: 30px;}.foot-section { background-color: blue; margin-bottom: 15px;}.foot-content { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-end;}.foot-section a { /*links*/ color: white;}.footer-container>h5 { /*Copyright*/ margin-left: auto; margin-right: auto; margin-top: auto; font-size: 15px;}@media (min-width: 992px) { .foot-section h2 { font-size: 20px; } .foot-section a, .foot-section h4 { font-size: 15px; }}<div class="container-fluid footer"> <div class="footer-container row"> <div class="col-sm-3 foot-section"> <div class="foot-content"> <h2><strong>Company</strong></h2> <h4>London, UK</h4> <h4>Logo by X</h4> <h4>Something else</h4> </div> </div> <div class="col-sm-3 foot-section"> <div class="foot-content"> <h2><strong>Quick Links</strong></h2> <a href="#">Home</a> <a href="#">Products</a> <a href="#">News & Reviews</a> </div> </div> <div class="col-sm-6 foot-section"> <div class="foot-content"> <h2><strong>Contact</strong></h2> </div> </div> <h5>Copyright ? X Ltd 2020, All Rights Reserved. |</h5><a href="#"> Privacy Policy</a> </div></div>
1 回答
狐的傳說
TA貢獻1804條經驗 獲得超3個贊
標題元素（例如 an?h4）往往在瀏覽器默認樣式表中設置頂部和底部邊距。
這些邊距不適用于錨元素 (?a)。
h4以下是應用于Chrome 中元素的樣式：
您可以看到頂部和底部邊距為 1.33em。
“block-start”是水平書寫模式下的頂部。
“inline-start”是文本開始的一側。這是 LTR 的左側。
“-end”指的是相反的一側。
您只需要覆蓋默認值即可。將其添加到您的代碼中：h4 { margin: 0; }.
? /* NEW */
.foot-section h4 {
? margin: 0;
}
.footer {
? font-family: 'nexa_light', sans-serif;
? font-style: normal;
? background-color: #003152;
? color: white;
}
.footer-container {
? background-color: red;
? width: 90%;
? margin-left: auto;
? margin-right: auto;
? padding-top: 25px;
? padding-left: 30px;
}
.foot-section {
? background-color: blue;
? margin-bottom: 15px;
}
.foot-content {
? display: flex;
? flex-direction: column;
? flex-wrap: nowrap;
? align-items: flex-start;
? justify-content: flex-end;
}
.foot-section a {
? /*links*/
? color: white;
}
.footer-container>h5 {
? /*Copyright*/
? margin-left: auto;
? margin-right: auto;
? margin-top: auto;
? font-size: 15px;
}
@media (min-width: 992px) {
? .foot-section h2 {
? ? font-size: 20px;
? }
? .foot-section a,
? .foot-section h4 {
? ? font-size: 15px;
? }
<div class="container-fluid footer">
? <div class="footer-container row">
? ? <div class="col-sm-3 foot-section">
? ? ? <div class="foot-content">
? ? ? ? <h2><strong>Company</strong></h2>
? ? ? ? <h4>London, UK</h4>
? ? ? ? <h4>Logo by X</h4>
? ? ? ? <h4>Something else</h4>
? ? ? </div>
? ? </div>
? ? <div class="col-sm-3 foot-section">
? ? ? <div class="foot-content">
? ? ? ? <h2><strong>Quick Links</strong></h2>
? ? ? ? <a href="#">Home</a>
? ? ? ? <a href="#">Products</a>
? ? ? ? <a href="#">News & Reviews</a>
? ? ? </div>
? ? </div>
? ? <div class="col-sm-6 foot-section">
? ? ? <div class="foot-content">
? ? ? ? <h2><strong>Contact</strong></h2>
? ? ? </div>
? ? </div>
? ? <h5>Copyright ? X Ltd 2020, All Rights Reserved. |</h5><a href="#"> Privacy Policy</a>
? </div>
</div>
- 1 回答
- 0 關注
- 116 瀏覽
添加回答
舉報
0/150
提交
取消