将2个元素放在同一行

时间:2019-04-08 12:16:06

标签: html css

我的代码应该非常简单,但是我不能将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>

5 个答案:

答案 0 :(得分:3)

您可以在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>

答案 1 :(得分: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>

答案 2 :(得分:1)

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>

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

使用以下代码:-

.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>