Html 将两个元素放在同一行

我的代码应该很简单，但我不能把标志放在按钮前面。它在它下面。我希望标志符号图标位于按钮右侧，并留有一小段空白

有什么想法吗

验证
签名

请使用按钮右侧的代码标志：

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

符号
.页边空白-左-5{
左边距：5px；
}

使用此css

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

。输入组{
浮动：左；
右边距：5px；
}

验证
签名

您可以在CSS中使用

display:inline

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

验证
签名

Div换了一行

因此，将元素放在同一个div上

验证
签名

使用以下代码：-

。图标按钮{
显示：内联块；
垂直对齐：中间对齐；
左边距：5px；
}
.输入组{
显示：内联块；
垂直对齐：中间对齐；
}

验证
签名

很多人没有告诉你的是，Div是一个

块

元素，这意味着它将换一行，我还建议将包含符号的范围直接放在按钮后面，但在按钮输入组外部范围内。这应该是正确且可接受的答案。我评论了这篇专栏文章。这是唯一的答案，解决了跨度应该直接在按钮之后，并且不需要内联样式，只需要使用默认功能。