1

我正在尝试在 Rails 表单输入旁边使用 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 是一种解决方案，我只是想知道我是否可以使用 Foundation 内置样式来使其正常工作...

4

2 回答 2

2

我考虑删除这个问题，因为它最终是一个非常容易解决的问题，但我认为有人，在某个地方，可能会从这个问题持续存在中受益。问题在于标签与输入位于十四列的同一部分。后缀尽最大努力与标签和输入的组合对齐。如果您将标签放在十四列之外，以便输入是该部分的唯一成员，则后缀将与输入对齐。

于 2013-05-09T04:14:49.343 回答
1

添加到 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>
于 2014-02-11T01:31:25.860 回答