Question

我有2个HTML按钮，我希望在同一行并排，第一个（提交请求）按钮是第一个。我遇到的问题是第二个按钮的顶部从底部按钮的底部结束开始。由于margin-left：50px元素，第二个按钮正确移动到右侧。我列出了以下2个按钮的HTML：

<button style="float: left;" onclick="javascript:submitRequests();">
    Submit Request(s)
</button>
<button style="float: left; margin-left: 50px" 
        onclick="javascript:document.location.reload(true);">
    Reset
</button>

Answer 1

在使用Codepen或JsFiddle添加您的代码或想法之前尝试。

我建议你看看我的解决方案：http://cdpn.io/uKLga

您可以看到简单地添加2个类并定义此按钮类型（提交和重置），这些类可帮助您逐个格式化。

Answer 2

这应该可以解决问题：http://jsfiddle.net/cau4t/

<div class="container">
    <button onclick="javascript:submitRequests();">Submit Request(s)</button>
    <button onclick="javascript:document.location.reload(true);">Reset</button>
</div>

.container {
    overflow: hidden;
}

button {
    float: left;
}

button:first-child {
    margin-right: 50px;
}

Answer 3

事实证明，我所要做的就是摆脱2个按钮之间的空间，现在它们不再是偏移的。这是一个Drupal网络形式，似乎对额外的空间很挑剔。

2个HTML按钮，我希望在同一行上并排

3 个答案: