无法在按钮之间留出空间答案

【问题标题】：not able to give space between buttons无法在按钮之间留出空间
【发布时间】：2014-07-11 01:04:59
【问题描述】：

我有 html 表单和 css，可以并排放置我的按钮。但我无法在按钮之间留出空间。

这是我的代码：

<html>
<body>

<div class="custom-buttons">



<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" style="float:left;color:#fff" value="paste2"/></form>

<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" style="float:left" value="colSplit"/>
</form>


<p style="clear:floats"></p>

</div>


</body>
</html>

【问题讨论】：

你试过margin吗？
jsfiddle.net/eZrw2
Adding space between buttons?的可能重复

标签： html css

【解决方案1】：

在这种情况下，您希望将 form 元素设置为浮动。从那里，您可以为第一个 form 元素添加边距。

<html>
<body>

<div class="custom-buttons">

<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank" style="float: left; margin-right: 5em;">
<input type="submit" value="paste2"/>
</form>

<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank" style="float: left;">
<input type="submit" value="colSplit"/>
</form>

</div>

</body>
</html>

【讨论】：

【解决方案2】：

最简单的方法是为其中一个输入添加边距。

Style="margin-right:30px;"

您可能会在此处看到输入之间有 30 像素间距的代码：http://jsfiddle.net/d6g66/

【讨论】：

【解决方案3】：

一个 jsfiddle 或其他展示它的东西会很好，或者至少是 css，但是您应该查看http://necolas.github.io/normalize.css/ 以获得明确的修复，并且在没有看到您的 css 的情况下，您应该能够使用边距或填充。

【讨论】：

【解决方案4】：

为custom-button 类指定宽度并将第二个按钮更改为float:right

http://jsfiddle.net/v85sH/

宽度可以是像素，百分比，任何你喜欢的，两个按钮左右均匀分布。

CSS

.custombuttons {
    width:100%;
}
.firstbutton {
    float:left;
    color:#fff;
}
.secondbutton {
    float:right;
}

HTML

<div class="custom-buttons">
    <form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
        <input type="submit" class="firstbutton" value="paste2" />
    </form>
    <form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
        <input type="submit" class="secondbutton" value="colSplit" />
    </form>
    <p style="clear:floats"></p>
</div>

【讨论】：