i want the link style like in the picture

时间：2017-11-13 06:35:28

标签： css

html code:

 <ul class="info-link">
   <li><a href="#"><i class="fa fa-map-marker"></i> &nbsp;3588 N Stelling road, Brooklyn, NYC, United State.</a> </li>
   <li><a href="#"><i class="fa fa-phone"></i> &nbsp;1900-167-168-99 EXT: 001</a></li>
   <li><a href="#"><i class="fa fa-mobile"></i> &nbsp;(05) 132-564-3333</a></li>
   <li><a href="#"><i class="fa fa-envelope"></i> &nbsp;logohere@support.com</a></li>
 </ul>

css code :

ul li {
  list-style: none;
}

result picture: code-result

desire result picture: desire-result

6 个答案:

答案 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="#"> &nbsp;3588 N Stelling road, Brooklyn, NYC,<br /> United State.</a> </li>
        <li><i class="fa fa-phone"></i><a href="#"> &nbsp;1900-167-168-99 EXT: 001</a></li>
        <li><i class="fa fa-mobile"></i><a href="#"> &nbsp;(05) 132-564-3333</a></li>
        <li><i class="fa fa-envelope"></i> <a href="#">&nbsp;logohere@support.com</a></li>
    </ul>
</div>

答案 2 :(得分：0)

您可以通过将i元素与position: absolute;放在一起，然后在左边为li添加填充来实现这一目标。

＆＃13;
＆＃13; 
ul {
  list-style: none;
  padding: 0;
}

li {
  position: relative;
  padding-left: 25px;
}

li i.fa {
  position: absolute;
  left: 0px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

看看：

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

答案 4 :(得分：0)

＆＃13;
＆＃13; 
.icon{
float:left;
text-align:right;
margin-right:5px;
}
.link-desc{
float:left;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 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>

相关问题
最新问题