您可以在Foundation pre / postfix标签和操作中使用Foundation Icons吗？

Question

我正在尝试使用Rail图标输入旁边的Foundation Icon设置的日历图标，并想要一个快速的方法来对齐这两个，同时使它看起来很好是使用Foundation的后缀标签。下面是我的代码，后面是截图，显示它们是兼容的，但是让它们彼此对齐的主要优先级不会发生：

<div class="row collapse">
  <div class="fourteen mobile-three columns">
    <label for="fundraiser-expire-at">End Date</label>
    <%= form.text_field 'expire_at',
                        class: 'datepicker' %>
  </div>
  <div class="two mobile-one columns">
    <span class="postfix">
      <i class="general enclosed foundicon-calendar show_datepicker"></i>
    </span>
  </div>
</div>

有谁知道我能找到我想要听到的方式？它需要CSS吗？我确信css是一个解决方案，我只是想知道我是否可以使用基于内置样式的基础来实现这个......

Answer 1

我打算删除这个问题，因为它最终成为一个非常简单的解决方案，但我认为某个人，某个地方，可能会受益于这个问题。问题在于标签与输入在14列的相同部分中。后缀尽力与标签和输入的组合对齐。如果您将标签放在十四列之外，以便输入是该部分的唯一成员，则后缀将自己与输入对齐。

Answer 2

添加到Jake Smiths的答案我将展示在哪里进行更改以使其成为后缀与该字段很好地对齐。下面的例子使用了Foundation 5.1.1和Ruby on Rails 3.2。

  <div class="row">
    <div class="large-4 columns">
      <div class="row collapse">
        <div class="small-9 columns">
          <%= f.label :altitude %> <!-- This line here must be moved outside this div -->
          <%= f.text_field :altitude %>
        </div>
        <div class="small-3 columns">
          <span class="postfix radius">meters</span>
        </div>
      </div>
    </div>
  </div>

这会导致未对齐的字段和标签。

如果我们将其更改为：

  <div class="row">
    <div class="large-4 columns">
      <div class="row collapse">
        <%= f.label :altitude %> <!-- Now it is happy and aligned :-) -->
        <div class="small-9 columns">
          <%= f.text_field :altitude %>
        </div>
        <div class="small-3 columns">
          <span class="postfix radius">meters</span>
        </div>
      </div>
    </div>
  </div>