如何将所有块移到顶部?

时间:2017-12-12 10:49:26

标签: html html5 css3 margin padding

[我想提升所有:电话图标+数字块,社交媒体图标块和回调块到"特斯拉标志"水平。我尝试了填充和边距,但它没有工作1

1 个答案:

答案 0 :(得分:0)

我认为这会对你有所帮助

a { 
text-decoration: none; 
color: #333;
}
.top-header > div { 
float: left; 
padding: 0 15px;
}
.callback a { 
background: lightblue; 
border: 2px solid #333; 
padding: 10px 20px; 
border-radius: 10px; 
display: inline-block;     
margin-top: 20px;
}
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="section">
<div class="top-header">
<div class="logo-block">
<img src="https://lorempixel.com/100/100/" />
</div>
<div class="phone-icon">
<p>
  <i class="fa fa-phone-square" aria-hidden="true"></i> +1(55) 345 67 74
</p>
<p>
  <i class="fa fa-phone-square" aria-hidden="true"></i> +1(44) 231 24 12
</p>
</div>
<div class="social-icon">
<p>
  <i class="fa fa-envelope" aria-hidden="true"></i> hr@gmail.com
</p>
  <a href="">
    <i class="fa fa-twitter-square" aria-hidden="true"></i>
  </a>
  <a href="">
    <i class="fa fa-vk" aria-hidden="true"></i>
  </a>
  <a href="">
    <i class="fa fa-facebook-square" aria-hidden="true"></i>
  </a>
</div>
<div class="callback">
<a href="">callback</a>
</div>
</div>
</div>
</body>