html - 试图制作一个页脚，其中社交媒体图标在同一行 css 中并排放置

Question

它是一个 Rails 应用程序，我主要做大量的编程工作，而较少使用 html/css 样式。

这是我正在尝试的页脚

  <div class="footer">
    <div class="fbicon">
      <%= image_tag 'fb-icon-white.png'%>
    </div>
    <div class="twicon">
      <%= image_tag 'twitter-icon-white.png'%>
    </div>
    <div class="pticon">
      <%= image_tag 'pinterest-icon-white.png'%>
    </div>
  </div>

我的想法是主页脚将具有较大的宽度，然后图标的其余部分将采用属于主页脚的部分宽度。

应用程序有一个 scss 文件，这是我尝试做一个三向部分 css

.footer {
    width: 960px;
    border: 1px;

    .fbicon {
        width: 300px; 
    }

    .twicon {
        width: 300px;
    }

    .pticon {
        width: 300px;
    }
}

它们都将一个堆栈对齐到另一个堆栈。他们不在同一行，这正是我要找的。任何帮助表示赞赏。

Answer 1

div 元素默认有一个 block 显示，它有 100% 的宽度，因此这就是它们堆叠在一起的原因。您可以尝试使用 inline-block 代替:

.footer {
  .fbicon, .twicon, .pticon {
    display: inline-block;
  }
}

或者您可以将它们 float 到左侧:

.footer {
  .fbicon, .twicon, .pticon {
    float: left;
  }
}