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;

它可能只是给图标a：

float:right;

我希望这会有所帮助。

我已经在你的小提琴里修好了它：http://jsfiddle.net/pvc7dfa7/1/

你需要在DIV中包装select / icon然后应用我提到的样式。

皮特

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

1 个答案: