如何使图标始终位于选择输入的右侧？

Question

如何使图标始终位于选择输入的右侧？我想让选择扩展，直到它旁边的图标接触到容器的边缘。

<div class="row form-group">
  <div class="col-md-12">
    <label>Justificativa</label>
  </div>
  <div class="col-md-12">
    <!-- Don't care about it. It's making a select tag that have width 100% -->
    <%= select_tag "loja[rf_justificativa]",
                                        options_for_select(rf_justificativas_lojas,
                                                                             selected: @loja.rf_justificativa),
                                        class: "campo_ai"
                                    %>
      <%= text_field_tag "loja[rf_justificativa]",
                                        @loja.rf_justificativa,
                                        class: "campo_ai hidden"
                                    %>
        <!-- Here is the icon that I want to show by side of the select -->
    <a class="ativa_inativa" href="#" title="Editar">
      <i class="fa fa-edit"></i>
    </a>
  </div>
</div>

我还对选择字段使用了Selectize.js。为了让它扩展，我使用了这个CSS。

.col-md-12 .selectize-control {
  width: 100%;
}

小提琴：http://jsfiddle.net/pvc7dfa7/

Answer 1

一种简单的方法是使用已有但已有的列

<div class="col-md-11"> <select></div>
<div class="col-md-1"> <icon> </div>

如果它必须就在它旁边和列里面，你可以用CSS来做。给他们两个属性：

display:inline-block;

它甚至可能只需要给图标一个：

float:right;

我希望这能帮到你。

我已经在这里为你解决了这个问题：http://jsfiddle.net/pvc7dfa7/1/

您需要将select/ icon包装在DIVs中，然后应用我提到的样式。

皮特