1
我爲我的網站編寫了一些代碼,出於某種原因,我無法將提交按鈕旁邊的社交圖標對齊。對齊訂閱按鈕旁邊的社交圖標
如何對齊提交按鈕旁邊的社交圖標?
這裏是我的代碼:
HTML:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="page">
<label style="font-weight:normal;" "margin-bottom: 0px;">Registrer deg for nyheter og spesialtilbud:</label>
<form action="//futuratech.us9.list-manage.com/subscribe/post? u=b867ca7c1f3791cf2ebff6f75&id=3eb1230909">
<input type="email" id="email" placeholder="Din E-postadresse" />
<input type="submit" id="submit" value="Registrer" />
</form>
</div>
<div class="socialIcons">
<ul>
<li><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="google"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinterest"><i class="fa fa-pinterest-square"></i></a></li>
<li><a href="#" class="youtube"><i class="fa fa-youtube"></i></a></li>
</ul>
</div>
CSS:
#email {padding: 5px 0px 5px 10px; width: 20%; }
#submit { margin-left: 10px; margin-top: 18px; padding: 8px 0px 8px 0px; width: 7%; border-radius: 0px; }
.socialIcons {
font-size: 24px;
li {
display: inline-block;
float: left;
text-align: center;
line-height: 40px;
a {
color: #000;
display: block;
width: 40px;
height: 40px;
&:hover {
color: #fff;
}
&.fb:hover {
background: #3c599f;
}
&.twitter:hover {
background: #00aced;
}
&.google:hover {
background: #d85131;
}
&.linkedin:hover {
background: #017eb4;
}
&.pinterest:hover {
background: #d20003;
}
&.youtube:hover {
background: #c8312b;
}
}
}
}
下面是代碼直播:http://codepen.io/Conscious/pen/vnhpf
您是否想要將社交按鈕直接放在按鈕右下方或直接放在按鈕右側? – Marcelo 2014-11-06 20:31:34
到按鈕的右側,謝謝! – Nohman 2014-11-06 20:40:22