无法在引导程序中的文本框前面放置按钮

Question

我正在编辑代码，我想在文本框中放置一个水平按钮。

<div class="input-group">
    <label for="fname">First Name</label>
    <input type="text" class="form-control" id="fname" name="fname" placeholder="First Name" autocomplete="off">
    <span class="input-group-btn">
        <button class='btn btn-success' type="button" onclick="myFunction('fname')"><i class="fa fa-microphone"></i></button>
    </span>
</div>

但是我在按钮上方有点像

Answer 1

您可以仅将按钮移动到文本框之前和标签之后

<div class="input-group">
        <span class="input-group-btn">
          <label for="fname">First Name</label>
          <button class ='btn btn-success' type="button" onclick="myFunction('fname')"><i class="fa fa-microphone"></i></button>
        </span>
        <input type="text" class="form-control" id="fname" name="fname" placeholder="First Name" autocomplete="off" >
      </div>

您可以在此处看到一个有效的示例：http://jsfiddle.net/aq9Laaew/280547/

Answer 2

只要带出label：

<label for="fname">First Name</label>
<div class="input-group">
    <input type="text" class="form-control" id="fname" name="fname" placeholder="First Name" autocomplete="off" >
    <span class="input-group-btn">
        <button class ='btn btn-success' type="button" onclick="myFunction('fname')"><i class="fa fa-microphone"></i></button>
    </span>
</div>

Answer 3

<label for="fname">First Name</label>
<div class="input-group">
  <span class="input-group-btn">
   <button class='btn btn-success' type="button" onclick="myFunction('fname')">test</button>
  </span>
  <input type="text" class="form-control" id="fname" name="fname" placeholder="First Name" autocomplete="off">
</div>