你好,希望你做得很好!我正在创建一个页脚,我通过链接分享我的代码:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
font-family: 'Poppins', sans-serif;
}
body{
width: 100%;
}
p{
font-size: 1.6rem;
line-height: 1.3;
color: #333;
font-weight: 400;
}
section{
padding: 70px 0;
}
.container{
width: 100%;
padding: 0 2.5rem;
margin: 0 auto;
max-width: 120rem;
}
/* FOOTER */
/* FOOTER */
/* FOOTER */
footer {
background-color: #f2f2f2;
font-size: 14px;
color: #666;
padding: 50px 0;
}
.footer{
display: flex;
justify-content: center;
align-items: center;
}
.footer-contacts{
display: flex;
margin-bottom: 30px;
}
.footer-phone,.footer-email{
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.footer-phone a,.footer-email a{
text-decoration: none;
margin-left: 5px;
}
.footer-columns {
display: flex;
justify-content: space-evenly;
align-items: center;
margin-bottom: 20px;
}
.footer-column h3 {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
ul li {
list-style: none;
margin-bottom: 5px;
}
<footer>
<div class="container">
<div class="footer">
<div class="footer-contacts">
<div class="footer-phone">
<img src="https://i.postimg.cc/nL1LD5tD/contact-phone.png" alt="contact-phone" width="30px" height="auto">
<a href="tel:+49(0) 123 456 78 000">+49(0) 123 456 78 000</a>
</div>
<div class="footer-email">
<img src="https://i.postimg.cc/nL1LD5tD/contact-phone.png" alt="contact-email" width="30px" height="auto">
<a href="mailto:webmaster@example.com">webmaster@example.com</a>
</div>
</div>
</div>
<div class="footer-columns">
<div class="footer-column">
<h3>Vivamus</h3>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
</ul>
</div>
<div class="footer-column">
<h3>Elementum</h3>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
</ul>
</div>
<div class="footer-column">
<ul>
<li>Product 1</li>
<li>Product 2</li>
</ul>
</div>
</div>
</div>
</footer>
x1c 0d1x我希望包含图片电话号码和电话号码的第一个分组HTML元素与第一列在同一行。包含图片电子邮件和文本电子邮件的第二个分组HTML元素与第二列在同一行也是一样的。
我希望第一个分组HTML元素与第一列在同一行也是相同的第二个分组HTML元素和第二列在同一行我试图给予右边距分组HTML元素,但破坏布局。任何想法,可以帮助我。
1条答案
按热度按时间ars1skjm1#
试试这样的东西,我只是把
footer-phone
和footer-email
放在同一个footer-column
里,这迫使它们排成一排。