Question

我正在尝试在文本输入的最右侧放置一个图标。但是，对于我目前拥有的代码，图标不断出现在包含输入框的div上方。我无法弄清楚为什么它会从容器中消失。 JS Fiddle可以在http://jsfiddle.net/fjuovf1h/找到。非常感谢任何帮助。

HTML

<div class="container content">
 <form accept-charset="UTF-8" action="/" class="sky-form" id="sky-form" method="post">
  <div class="row">
   <div class="col-md-12">
    <header>Header</header>
     <fieldset>
      <div class="row">
       <section class="col col-4">
        <div class="form-group">
         <label class="inline">From</label>
         <span class="icon-append fa fa-plane"></span>
         <input class="form-control inline" id="flight_depart_city" name="flight[depart_city]" placeholder="City, State" type="text" />
        </div>
       </section>
      </div>
     </fieldset>
    </div>
   </div>
  </form>
</div>

CSS可以在JSFiddle上找到

Answer 1

那是因为span具有绝对定位，所以它将相对于没有静态定位的最近父母放置。这恰好是class="col-md-12"的div。

您可以在字段的父元素上设置定位，这将使图标相对于该元素放置：

.form-group { position: relative; }

跨度没有容器

1 个答案: