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

Question

I have a Rails 3.2.8 application and I'm trying to customize some of the classes that come with the simple_form_for gem.

I have a page with many multiple select boxes on it, and to use space wisely I want the labels to appear on top of the select boxes.

I can't quite figure out how to do that. I have very little CSS experience and I'm trying to dive right in. I have used float with some success, but when you use simple_form_for you end up with a bunch of nested <div> tag for a form element. So my select box is only floating as far left as the containing <div> tag. I want it to be in line with the label. Here is a rendered example:

<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应用position：相对于包含div的位置（选择一个包含标签和控件的位置），然后将position：absolute应用于标签，连同左和顶部一起将其放置在所需的位置-相对于包含的div 。