如何使用CSS制作多选框，但标签显示在顶部而不是左侧？

Question

我有一个Rails 3.2.8应用程序，我正在尝试自定义simple_form_for gem附带的一些类。

我的页面上有多个选择框，为了明智地使用空间，我希望标签出现在选择框的顶部。

我无法弄明白该怎么做。我的CSS经验非常少，而且我正试图潜入。我已经使用float取得了一些成功，但是当你使用simple_form_for时，你最终会得到一堆嵌套的<div>标签用于表单元件。因此，我的选择框仅悬浮在包含<div>标记的左侧。我希望它与标签一致。这是一个渲染的例子：

<div id="attribute_value_list" class="attribute_value_list">
  <div class="control-group select required">
    <label class="select required control-label" for="app_attribute1">
      <abbr title="required">*</abbr>
      Vehicle: Make
    </label>
    <div class="controls">
      <select id="app_attribute1" class="select required select_attribute_value" size="10" name="app[attribute1]">
        ...
      </select>
    </div>
  </div>
</div>

Answer 1

您将需要应用位置：相对于包含div（选择一个包含标签和控件的位置），然后将：absolute定位到标签，以及左侧和顶部以将其定位在您想要的任何位置 - 相对于包含div。