Question

我为自己的网站编写了一些代码，由于某种原因，我无法将提交按钮旁边的社交图标对齐。

如何对齐提交按钮旁边的社交图标？

这是我的代码：

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&amp;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

Answer 1

在摆弄position和box-sizing之后，我找到了一个可能适合您的解决方案： http://codepen.io/Xoqes/pen/uJLtA?editors=110

对齐订阅按钮旁边的社交图标

1 个答案: