html code:
<ul class="info-link">
<li><a href="#"><i class="fa fa-map-marker"></i> 3588 N Stelling road, Brooklyn, NYC, United State.</a> </li>
<li><a href="#"><i class="fa fa-phone"></i> 1900-167-168-99 EXT: 001</a></li>
<li><a href="#"><i class="fa fa-mobile"></i> (05) 132-564-3333</a></li>
<li><a href="#"><i class="fa fa-envelope"></i> logohere@support.com</a></li>
</ul>
css code :
ul li {
list-style: none;
}
result picture: code-result
desire result picture: desire-result
答案 0 :(得分：1)
我们只使用“position”制作CSS。无需更改代码。另外，根据图像，您的所有图标都与文本对齐，因此也可以使用。
.info-link{
width:280px;
}
ul.info-link li {
list-style: none;
margin-bottom:10px;
position:relative;
padding-left: 25px;
}
ul.info-link li i{
position:absolute;
top:0px;
left:0px;
display:block;
width:20px;
text-align:right;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="info-link">
<li><a href="#"><i class="fa fa-map-marker"></i>3588 N Stelling road, Brooklyn, NYC, United State.</a> </li>
<li><a href="#"><i class="fa fa-phone"></i>1900-167-168-99 EXT: 001</a></li>
<li><a href="#"><i class="fa fa-mobile"></i>(05) 132-564-3333</a></li>
<li><a href="#"><i class="fa fa-envelope"></i>logohere@support.com</a></li>
</ul>
注意：.info-link它的正常温度。 class，所以当你使用它时，如果不需要，那么删除它。
答案 1 :(得分：0)
那就是你想要的东西
ul li{
list-style:none;
margin: 15px 0;}
a{
display: inline-flex;
text-decoration: none}
i{
width:20px;}
.contact{
border: 1px solid rgba(129, 116, 116, 0.71);
background: rgba(215, 215, 215, 0.51);
width: 400px;
}
h1{
padding: 0px 40px;
}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="contact">
<h1>Contact Info</h1>
<ul class="info-link">
<li><i class="fa fa-map-marker"></i><a href="#"> 3588 N Stelling road, Brooklyn, NYC,<br /> United State.</a> </li>
<li><i class="fa fa-phone"></i><a href="#"> 1900-167-168-99 EXT: 001</a></li>
<li><i class="fa fa-mobile"></i><a href="#"> (05) 132-564-3333</a></li>
<li><i class="fa fa-envelope"></i> <a href="#"> logohere@support.com</a></li>
</ul>
</div>
答案 2 :(得分：0)
您可以通过将i元素与position: absolute;放在一起，然后在左边为li添加填充来实现这一目标。
ul {
list-style: none;
padding: 0;
}
li {
position: relative;
padding-left: 25px;
}
li i.fa {
position: absolute;
left: 0px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<ul class="info-link">
<li><a href="#"><i class="fa fa-map-marker"></i>3588 N Stelling road, Brooklyn, NYC, United State.</a> </li>
<li><a href="#"><i class="fa fa-phone"></i>1900-167-168-99 EXT: 001</a></li>
<li><a href="#"><i class="fa fa-mobile"></i>(05) 132-564-3333</a></li>
<li><a href="#"><i class="fa fa-envelope"></i>logohere@support.com</a></li>
</ul>
答案 3 :(得分：0)
看看：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.parent {
padding: 20px;
width: 300px;
background: #ddd;
}
.title {
margin-top: 0;
margin-bottom: 20px;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
margin-bottom: 10px;
}
.inner {
display: flex;
}
ul li i {
min-width: 20px;
text-align: center;
margin-top: 2px;
margin-right: 10px;
}
ul li a {
text-decoration: none;
color: #777;
}
ul li a:hover {
color: #444;
}
.scaleup {
display: inline-block;
transform: scale(1.5);
}
.scaledown {
display: inline-block;
transform: scale(0.9);
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="parent">
<h3 class="title">Contact Info</h3>
<ul class="info-link">
<li>
<div class="inner">
<i class="fa fa-map-marker"></i>
<a href="">3588 N Stelling road, Brooklyn, NYC, United State.</a>
</div>
</li>
<li>
<div class="inner">
<i class="fa fa-phone"></i>
<a href="">1900-167-168-99 EXT: 001</a>
</div>
</li>
<li>
<div class="inner">
<i class="scaleup fa fa-mobile"></i>
<a href="">(05) 132-564-3333</a>
</div>
</li>
<li>
<div class="inner">
<i class="scaledown fa fa-envelope"></i>
<a href="">logohere@support.com</a>
</div>
</li>
</ul>
</div>
希望这有帮助！
答案 4 :(得分：0)
.icon{
float:left;
text-align:right;
margin-right:5px;
}
.link-desc{
float:left;
}<ul class="info-link">
<li>
<a href="#">
<div class="icon"><i class="fa fa-map-marker"></i></div>
<div class="link-desc">3588 N Stelling road, Brooklyn, NYC, United State</div>
<div style="clear:both"></div>
</a>
</li>
<li>
<a href="#">
<div class="icon"><i class="fa fa-phone"></i></div>
<div class="link-desc">1900-167-168-99 EXT: 001</div>
<div style="clear:both"></div>
</a>
</li>
<li>
<a href="#">
<div class="icon"><i class="fa fa-mobile"></i></div>
<div class="link-desc">(05) 132-564-3333</div>
<div style="clear:both"></div>
</a>
</li>
<li>
<a href="#">
<div class="icon"><i class="fa fa-envelope"></i></div>
<div class="link-desc">logohere@support.com</div>
<div style="clear:both"></div>
</a>
</li>
</ul>
答案 5 :(得分：0)
试试这个：
* {
box-sizing: border-box;
}
li {
margin-bottom: 10px;
}
ul {
width: 300px;
background-color: #DDD;
list-style: none;
padding: 0;
}
a {
color: #000;
text-decoration: none;
}
i {
width: 6%;
margin-left: 1%;
vertical-align: top;
}
span {
width: 93%;
display: inline-block;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="info-link">
<li><a href="#"><i class="fa fa-map-marker"></i><span>3588 N Stelling road, Brooklyn, NYC, United State.</span></a></li>
<li><a href="#"><i class="fa fa-phone"></i><span>1900-167-168-99 EXT: 001</span></a></li>
<li><a href="#"><i class="fa fa-mobile"></i><span>(05) 132-564-3333</span></a></li>
<li><a href="#"><i class="fa fa-envelope"></i><span>logohere@support.com</span></a></li>
</ul>