我怎样才能实现这种关于图像的布局,
我已经开发代码了
这是我的 CSS 文件,我得到了准确的输出。但是如果我的地址更改大文本意味着我的图标折叠无法对齐中心,我会遇到一个问题,我该如何更改它。这是我的 fiddle .我不想使用 bootstrap。需要了解一些有关 flex 属性的知识
*{
margin: 0;
}
section{
background-color: #555;
padding: 2rem 0;
text-align: center;
}
.contact{
display: inline-block;
text-align: left;
}
.contact h2{
color: white;
font-size: 1.125rem;
font-weight: 500;
text-align: center;
text-transform: uppercase;
margin-bottom: 20px;
}
.contact li{
display: flex;
align-items: center;
margin-bottom: 10px;
}
.contact li:last-child{
margin: 0;
}
.contact a{
color: white;
text-decoration: none;
}
.contact a:hover{
color: yellow;
}
.contact p{
color: white;
line-height: 1.4;
}
.contact .fa{
color: white;
font-size: 1.5rem;
line-height: 30px;
margin-right: 10px;
width: 30px;
height: 30px;
text-align: center;
}
<section>
<div class="contact">
<h2>Contact us</h2>
<ul>
<li>
<i class="fa fa-envelope"></i>
<a href="#">questions@newco.com</a>
</li>
<li>
<i class="fa fa-phone"></i>
<a href="#">111-222-333</a>
</li>
<li>
<i class="fa fa-building-o"></i>
<p>NewCo, Inc <br>
123 Main St. <br>
Somewhere, CA 12345
</p>
</li>
</ul>
</div>
</section>
最佳答案
由于 h2
的左侧没有图标,因此需要对其进行补偿,同时 ul
有一个默认的 padding
。
通过添加新规则,.contact ul
,使用padding-left: 0
,添加margin-left: 40px;
( icon 的 宽度/右边距之和)到 .contact h2
规则并删除 text-align: center
,你将能够实现什么你想要的。
堆栈片段
*{
margin: 0;
}
section{
background-color: #555;
padding: 2rem 0;
text-align: center;
}
.contact{
display: inline-block;
text-align: left;
}
.contact h2{
color: white;
font-size: 1.125rem;
font-weight: 500;
/*text-align: center; removed */
text-transform: uppercase;
margin-bottom: 20px;
margin-left: 40px; /* added */
}
.contact ul{
padding-left: 0; /* added */
}
.contact li{
display: flex;
align-items: center;
margin-bottom: 10px;
}
.contact li:last-child{
margin: 0;
}
.contact a{
color: white;
text-decoration: none;
}
.contact a:hover{
color: yellow;
}
.contact p{
color: white;
line-height: 1.4;
}
.contact .fa{
color: white;
font-size: 1.5rem;
line-height: 30px;
margin-right: 10px;
width: 30px;
height: 30px;
text-align: center;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section>
<div class="contact">
<h2>Contact us</h2>
<ul>
<li>
<i class="fa fa-envelope"></i>
<a href="#">questions@newco.com</a>
</li>
<li>
<i class="fa fa-phone"></i>
<a href="#">111-222-333</a>
</li>
<li>
<i class="fa fa-building-o"></i>
<p>NewCo, Inc <br> 123 Main St. 123 Main St.123 Main St. <br> Somewhere, CA 12345
</p>
</li>
</ul>
</div>
</section>
</body>
</html>
关于html - 如何使用 css 中的 flex box 实现带有 Font Awesome 图标的联系页面,比如我的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48519250/