Question

我的代码应该非常简单，但是我不能将Sign放在按钮前面。它在它之下。我想要按钮右侧的标志字形符号glyphicon。

有什么主意吗？

<div class="form-group">
  <div class="input-group">
    <input />
    <span class="input-group-btn">
    <button type="button">Validate</button>
    </span>
  </div>
  <div>
    <span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
  </div>
</div>

Answer 1

您可以在CSS中使用display: inline。

尽管我建议将CSS放在外部样式表中。

<div class="form-group">
  <div class="input-group" style="display:inline;">
    <input />
    <span class="input-group-btn">
    <button type="button">Validate</button>
    </span>
  </div>
  <div  style="display:inline;">
    <span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
  </div>
</div>

Answer 2

使用此CSS

.input-group{
   float:left;
   margin-right:5px;
}

.input-group{
float:left;
margin-right:5px;
}

<div class="form-group">
  <div class="input-group">
    <input />
    <span class="input-group-btn">
    <button type="button">Validate</button>
    </span>
  </div>
  <div>
    <span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
  </div>
</div>

Answer 3

div换行了

因此，将元素放在相同的div

<div class="form-group">
  <div class="input-group">
    <input />
    <span class="input-group-btn">
    <button type="button">Validate</button>
    </span>
    <span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
  </div>
</div>

请勿使用

显示：内联

这是一个不好的做法，div应该划分元素。如果需要容器，请改用标签跨度。

就像下面这样

    <div class="form-group disp-inline">
      <span class="input-group">
        <input />
        <span class="input-group-btn">
        <button type="button">Validate</button>
        </span>
      </span>
      <span>
        <span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
      </span>
    </div>

Answer 4

请使用该代码签名将出现在按钮的右侧：

<div class="form-group">
          <div class="input-group">
            <input />
            <span class="input-group-btn">
            <button type="button">Validate</button>
    <span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
            </span>
          </div>
          <div>
          </div>
        </div>

如果您有任何余量，请使用css作为余量并将类添加到其中，例如：

<span class="margin-left-5"><i class="glyphicon glyphicon-ok-sign">sign</i></span>
.margin-left-5{
   margin-left:5px;
}

Answer 5

使用以下代码：-

.icon-button{
  display:inline-block;
  vertical-align:middle;
  margin-left:5px;
}
.input-group{
  display:inline-block;
  vertical-align:middle;
}

<div class="form-group">
  <div class="input-group">
    <input />
    <span class="input-group-btn">
    <button type="button">Validate</button>
    </span>
  </div>
  <div class="icon-button">
    <span><i class="glyphicon glyphicon-ok-sign">sign</i></span>
  </div>
</div>

将2个元素放在同一行

5 个答案: