html - 我怎样才能使图标始终位于选择输入的右侧？

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%;
}

fiddle :http://jsfiddle.net/pvc7dfa7/

Answer 1

一个简单的方法是使用你已经拥有的列

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

如果它必须在它的旁边和列内，您可以使用 CSS 来完成。给他们两个属性(property):

display:inline-block;

它甚至可以只给图标一个:

float:right;

希望对您有所帮助。

我已经在您的 fiddle 中为您修复了它:http://jsfiddle.net/pvc7dfa7/1/

您需要将选择/图标包装在 DIV 中，然后应用我提到的样式。

皮特